Nextjs With AI

Nextjs-with-AI

A `CLAUDE.md` template that teaches [Claude Code](https://docs.anthropic.com/en/docs/claude-code) modern Next.js 16+ best practices. Drop it into any Next.js App Router project and Claude will follow production-grade conventions for TypeScript, React Server Components, Server Actions, the Cache Components model, accessibility, security, testing, and more — automatically, on every interaction.

Why

Claude Code reads `CLAUDE.md` from your working directory and applies its rules to every conversation (including sub-agents). Without guardrails, AI-generated Next.js code can drift in ways that are hard to see until production: `useState` in a Server Component (build error), unawaited `params` (silent breakage in 16), raw DB queries in route components (no auth check), Server Actions without re-authentication (public POST endpoints anyone can call), `'use cache'` without a `cacheLife` (no caching), tokens in `localStorage`, secrets in `NEXT_PUBLIC_*`. This template codifies the conventions experienced Next.js teams enforce in code review — Server/Client boundary discipline, the Data Access Layer pattern, Cache Components usage, Server Action security — so Claude follows them from the first line.

Two Versions

Pick the one that fits your project.

File	Size	Contains	Best for
`CLAUDE.md.FULL`	39,977 chars	All rules plus canonical code examples (cached function, secured Server Action, project tree)	Teams that want rules plus concrete patterns — Claude follows rules-with-examples more reliably
`CLAUDE.md.SHORT`	30,852 chars	All rules, no fenced code blocks	Token-constrained setups, or projects that just need guardrails without inline samples

Both files cover the **same rules** — the only difference is whether each rule is illustrated with a code block. SHORT is ~23% smaller because it strips all fenced code blocks while preserving every rule, table, and