Claude Rules for Next.js

Next.js CLAUDE.md Rules

Next.js is one of the highest-leverage targets for a CLAUDE.md file. The framework has many overlapping conventions — App Router vs Pages Router, Server vs Client Components, the rules around "use client", route handlers vs API routes, next/navigation vs next/router — and Claude Code's training data spans every version Next.js has ever shipped. Without explicit rules, Claude often mixes patterns from Next.js 12, 13, 14, and 15, producing code that compiles but conflicts with how your app is actually built. The Next.js CLAUDE.md rules below come from real production projects: they pin which router the project uses, set rendering defaults, define how data is fetched in Server Components, list the API route handler patterns the team has standardized on, and call out the legacy patterns to avoid. If you're starting a Next.js CLAUDE.md from scratch, the most useful section to add first is a single-line statement of which Next.js version and which router pattern your app uses.