Next Best Practices

What it does

This skill, "Next Best Practices," provides guidance and checks for Next.js development workflows, specifically focusing on adhering to recommended best practices. It offers rules and detections related to file conventions, React Server Component (RSC) boundaries, asynchronous patterns introduced in Next.js 15+, runtime selection, directives, functions, and error handling within Next.js projects. The skill helps ensure code quality and proper implementation of Next.js features.

When to use it

• When writing new Next.js code to proactively follow best practices.
• During code reviews to identify potential issues or deviations from recommended patterns.
• When migrating to Next.js 15+ to understand and implement the new asynchronous API changes.
• To ensure correct usage of React Server Components and avoid common pitfalls.
• For troubleshooting errors related to runtime selection (Node.js vs. Edge).

Key capabilities

• File Convention Checks: Enforces project structure, route segment handling (dynamic, catch-all), and middleware conventions.
• RSC Boundary Detection: Identifies invalid React Server Component patterns like async client components and non-serializable props.
• Async Pattern Guidance: Provides information on using asynchronous params, searchParams, cookies(), and headers() in Next.js 15+.
• Runtime Selection Advice: Offers guidance on when to use the Node.js or Edge runtime environments.
• Directive Validation: Checks for correct usage of React directives ('use client', 'use server') and the Next.js cache directive ('use cache').
• Function Usage Guidance: Provides information about navigation hooks (e.g., useRouter, useSearchParams), server functions, and generate functions.
• Error Handling Best Practices: Offers guidance on implementing error handling using files like error.tsx and global-error.tsx.

Example prompts

• "Review this Next.js code for adherence to best practices."
• "Check this component for invalid React Server Component patterns."
• "What are the recommended file conventions for a dynamic route segment in Next.js?"
• “How should I handle cookies in a server action?”

Tips & gotchas

• This skill focuses specifically on Next.js best practices and does not cover general frontend development tasks.
• The skill relies on external markdown files (file-conventions.md, rsc-boundaries.md, etc.) for detailed information, so understanding those documents is helpful.
• Migration codemods are mentioned as a resource for Next.js 15+ upgrades; the skill itself does not perform automated migrations.