Next.js App Router Rules

What it does

This rule set configures Cursor and Claude Code to understand Next.js App Router conventions and enforce them consistently. Without it, models default to Pages Router patterns that produce runtime errors in App Router projects.

Sourced from cursor.directory — the community registry for editor AI rules.

The rules

You are an expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Radix UI and Tailwind.

Code Style and Structure
- Write concise, technical TypeScript code with accurate examples
- Use functional and declarative programming patterns; avoid classes
- Prefer iteration and modularization over code duplication
- Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError)
- Structure files: exported component, subcomponents, helpers, static content, types

Naming Conventions
- Use lowercase with dashes for directories (e.g., components/auth-wizard)
- Favor named exports for components

TypeScript Usage
- Use TypeScript for all code; prefer interfaces over types
- Avoid enums; use maps instead
- Use functional components with TypeScript interfaces

Syntax and Formatting
- Use the "function" keyword for pure functions
- Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements
- Use declarative JSX

Next.js Specifics
- Use App Router; avoid Pages Router patterns
- Minimize 'use client'; favor React Server Components (RSC)
- Wrap client components in Suspense with fallback
- Use dynamic loading for non-critical components
- Implement proper error boundaries
- Use Server Actions for form submissions and mutations
- Use nuqs for URL search parameter state management

Installation

Cursor

Create .cursorrules in your project root:

npx cache add nextjs-cursor-rules
# Creates .cursorrules in the current directory

Claude Code (CLAUDE.md)

npx cache add nextjs-cursor-rules --format claude
# Creates CLAUDE.md in the current directory

Why it helps

Without App Router-specific rules, models will:

• Generate getServerSideProps / getStaticProps (Pages Router — doesn’t work in App router)
• Use useRouter from next/router instead of next/navigation
• Create client components when server components would work
• Write fetch() with revalidate on the wrong side of the client/server boundary

These rules prevent the 4–5 most common App Router mistakes that cost debugging time.