nextjs app router
via PatrickJS/awesome-cursorrules
Best practices and patterns for Next.js App Router development
What is nextjs app router?
Guidance for building Next.js applications using the App Router with server components by default, file-based routing, and special files like layout.js, loading.js, and error.js. Use this rule when starting or refactoring a Next.js project to follow modern App Router conventions.
- Prioritize server components by default, using client components only when necessary
- Leverage file-based routing with layout.js for shared layouts, loading.js for loading states, and error.js for error handling
- Use route handlers for API routes instead of pages API
- Implement TypeScript for type safety and proper metadata for SEO
- Optimize images with Next.js Image component and style with CSS Modules or Tailwind CSS
- Follow Next.js naming conventions for special files and use environment variables for configuration
Applies to
File patterns this rule matches.
Rule definition (reference)
Source of truth, from the repository.
// Next.js App Router .cursorrules
// Next.js App Router best practices
const nextjsAppRouterBestPractices = [ "Use server components by default", "Implement client components only when necessary", "Utilize the new file-based routing system", "Use layout.js for shared layouts", "Implement loading.js for loading states", "Use error.js for error handling", "Utilize route handlers for API routes", ];
// Folder structure
const folderStructure = app/ layout.js page.js components/ lib/ styles/ public/;
// Additional instructions
const additionalInstructions = `
- Use TypeScript for type safety
- Implement proper metadata for SEO
- Utilize Next.js Image component for optimized images
- Use CSS Modules or Tailwind CSS for styling
- Implement proper error boundaries
- Follow Next.js naming conventions for special files
- Use environment variables for configuration `;
Related rules
Senior full-stack TypeScript, React, Node.js guidance with clean architecture, testing, and WHY-oriented reasoning.
Quantitative factor research skills for designing, evaluating, and mining alpha factors in equities markets.
Android development with Jetpack Compose, clean architecture, and Material Design 3.
Angular development with Novo Elements UI library using standalone components.
Expert Angular 18 + TypeScript development with Jest, emphasizing clean code and performance.
Manage Kubernetes clusters, add-ons, stacks, and credentials via the Ankra CLI platform.