What problem does it solve?
This Skill ensures that you apply best practices in Next.js development, leading to more efficient, maintainable, and optimized web applications.
Core Features & Use Cases
- File Conventions: Adhere to established file naming and structure conventions for clarity and consistency.
- RSC Boundaries: Identify and prevent invalid React Server Component patterns to avoid common pitfalls.
- Async Patterns: Optimize Next.js 15+ async API usage for better performance and reliability.
- Runtime Selection: Choose the appropriate runtime (Node.js or Edge) based on your project's needs.
- Directives: Utilize React and Next.js directives for efficient code organization and execution.
- Error Handling: Implement robust error handling to improve user experience and debug more effectively.
- Data Patterns: Select the right data fetching patterns for different use cases.
- Route Handlers: Create efficient API endpoints using Next.js Route Handlers.
- RSC Boundaries: Detect and prevent invalid React Server/Client component patterns.
- Hydration Errors: Diagnose and fix React hydration mismatch errors for smoother rendering.
- Suspense Boundaries: Use Suspense boundaries to manage client-side rendering and improve performance.
- Parallel & Intercepting Routes: Implement modal patterns with parallel and intercepting routes.
- Self-Hosting: Deploy Next.js outside of Vercel, optimizing for production environments.
- Debug Tricks: Utilize advanced debugging techniques for Next.js applications.
- Metadata & OG Images: Generate metadata and Open Graph images for improved SEO.
- Image Optimization: Optimize images for the web using Next.js and third-party services.
- Font Optimization: Optimize font delivery and performance with
next/font.
- Bundling: Manage and optimize the bundling process for efficient builds.
- Migrating from Webpack to Turbopack: Migrate from Webpack to the new Turbopack bundler for improved performance.
Quick Start
To apply Next.js best practices, begin by reviewing the file-conventions.md for guidelines on project structure and special files.
