PluginBench
Rule

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 = `

  1. Use TypeScript for type safety
  2. Implement proper metadata for SEO
  3. Utilize Next.js Image component for optimized images
  4. Use CSS Modules or Tailwind CSS for styling
  5. Implement proper error boundaries
  6. Follow Next.js naming conventions for special files
  7. Use environment variables for configuration `;

Related rules

Next.js + Material UI + Tailwind CSS + shadcn/ui + Aeternity UI development guide

**/*
41k
via PatrickJS/awesome-cursorrules

Expert guidance for Next.js, React, and Tailwind CSS development with TypeScript best practices.

**/*
41k
via PatrickJS/awesome-cursorrules

Expert guidance for Next.js 14, React, TypeScript, and Web3 stack development

**/*
41k
via PatrickJS/awesome-cursorrules

Next.js development guidance with SEO optimization and code quality standards.

**/*
41k
via PatrickJS/awesome-cursorrules

Next.js + Supabase + Shadcn + PWA development rules with code quality, build tracking, and project documentation standards.

**/*
41k
via PatrickJS/awesome-cursorrules

Next.js and Supabase setup for building a Todo app.

**/*
41k
via PatrickJS/awesome-cursorrules