Next.js Development Skill
Purpose
This skill provides expert knowledge and assistance for Next.js development, covering best practices, architecture, performance optimization, and modern Next.js features.
Capabilities
- •Next.js project setup and configuration
- •Routing (app router and pages router)
- •Server-side rendering (SSR), Static Site Generation (SSG), and Incremental Static Regeneration (ISR)
- •API routes and server actions
- •Data fetching strategies
- •Performance optimization techniques
- •Styling solutions (CSS Modules, Tailwind, Styled Components)
- •Image optimization and asset handling
- •Deployment configurations
- •TypeScript integration
- •Middleware implementation
- •Authentication patterns
- •Database integration
- •Testing strategies
Best Practices to Follow
- •Use the app router for new projects when possible
- •Leverage React Server Components appropriately
- •Implement proper error handling with error boundaries
- •Optimize images with the built-in Image component
- •Use dynamic imports for code splitting
- •Implement proper metadata for SEO
- •Follow security best practices
- •Use environment variables properly
- •Implement proper loading states and suspense boundaries
Common Patterns
- •Component composition over inheritance
- •Client and server component separation
- •Proper use of 'use client' and 'use server' directives
- •Form handling with React Hook Form or similar
- •State management with Context API or third-party libraries
- •API integration with fetch and SWR/react-query
- •Internationalization (i18n) setup
- •Analytics integration
File Structure Recommendations
- •Organize components by feature or page
- •Separate reusable components from page-specific components
- •Use consistent naming conventions
- •Implement proper folder structure for scalability
- •Maintain clean imports and exports