next-best-practices
Installation
SKILL.md
Next.js Best Practices
Modern Next.js (v16+) with App Router, React Server Components, and Cache Components. This skill ensures you use current APIs instead of deprecated patterns like unstable_cache, getServerSideProps, or useFormState.
Critical Modern Patterns
These patterns differentiate production-quality Next.js code from outdated approaches. Prioritize them in every implementation:
| Pattern | What | Why it matters |
|---|---|---|
'use cache' directive |
Cache any async computation (not just fetch) |
Replaces unstable_cache. Enables PPR. |
useActionState |
Form pending states + error handling | Replaces useFormState. React 19 standard. |
useOptimistic |
Instant UI updates before server responds | Critical for perceived performance. |
updateTag |
Immediate cache expiration in Server Actions | Read-your-own-writes. Use instead of revalidateTag after mutations the user should see immediately. |
import 'server-only' |
Prevent accidental client import of server code | Protects secrets, reduces bundle. Always use on DB/auth modules. |
| Async request APIs | params, searchParams, cookies(), headers() are all Promise in Next.js 15+ |
Must await in server components, use() in client components. |
| Proxy (formerly Middleware) | middleware.ts renamed: export proxy() function instead of middleware() |
Next.js 16 rename. Same functionality, new name. |