nextjs app router
via PatrickJS/awesome-cursorrules
Best practices and folder structure for Next.js App Router development.
What is nextjs app router?
Guidance for building Next.js applications using the App Router paradigm. Covers server/client component patterns, file-based routing, special files (layout, loading, error), and recommended folder structure. Use this rule when starting or refactoring a Next.js project to the App Router.
- Enforce server components by default with client components only when necessary
- Guide file-based routing and special file usage (layout.js, loading.js, error.js, page.js)
- Recommend folder structure organization for app, components, lib, styles, and public directories
- Suggest route handlers for API routes instead of pages/api
- Recommend TypeScript, CSS Modules or Tailwind CSS, and Next.js Image component for optimization
- Advise on metadata implementation for SEO and environment variable usage
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
Next.js + Material UI + Tailwind CSS + shadcn/ui + Aeternity UI development guide
Expert guidance for Next.js, React, and Tailwind CSS development with TypeScript best practices.
Expert guidance for Next.js 14, React, TypeScript, and Web3 stack development
Next.js development guidance with SEO optimization and code quality standards.
Next.js + Supabase + Shadcn + PWA development rules with code quality, build tracking, and project documentation standards.
Next.js and Supabase setup for building a Todo app.
