What problem does it solve?
This Skill helps prevent common Next.js App Router mistakes that cause incorrect rendering, performance regressions, hydration bugs, and SEO issues.
Core Features & Use Cases
- File conventions & routing sanity: Guides correct use of App Router special files, route segment patterns, parallel/intercepting routes, and middleware/proxy naming so hard navigations don’t break.
- Server/Client correctness & async safety: Detects invalid React Server Components boundary patterns, ensures Next.js 15+ async APIs like params/searchParams/cookies/headers are handled properly, and recommends safe patterns for metadata.
- Performance & quality guardrails: Covers runtime selection, bundling pitfalls, suspense boundaries for CSR bailout hooks, image/font optimization, script loading, and structured error handling to keep apps stable and fast.
- Operational recipes: Includes practical guidance for route handlers vs server actions, OG image generation, self-hosting considerations, and debugging workflows (including MCP endpoint usage).
Quick Start
Apply the guidance from the next-best-practices Skill to your Next.js codebase by reviewing your affected route files for the listed conventions and updating them until they follow the documented RSC boundaries, async patterns, and metadata/image rules.