Cursor rules file for Next.js App Router, TypeScript and Tailwind
A .cursorrules file that keeps AI-generated code in a Next.js App Router project consistent: server-first components, parallel data fetching, validated Server Actions, Zod at trust boundaries, Tailwind-only styling and safe env handling.
File in Engineering by AISkillHub Library
What it does
Coding assistants default to patterns from older React and Next.js code: `useEffect` fetching, `"use client"` at the top of every file, the Pages Router, unvalidated form handlers. In an App Router project those cost performance and introduce security gaps. This rules file tells the assistant how this kind of project is built.
**Highlights**
- **Server and client components**: server by default, `"use client"` pushed as low as possible, no server-only imports in client components (with `import "server-only"` guards), only serializable props across the boundary. - **Data fetching**: in Server Components or route handlers, with independent requests started together via `Promise.all` instead of sequential awaits. - **Mutations**: Server Actions that validate input with Zod, check authorization inside the action, return a typed result object, and revalidate affected paths or tags. - **Routing**: when to add `loading.tsx` and `error.tsx` (client component), metadata exports, kebab-case file names. - **Styling**: Tailwind utilities only, `next/image` and `next/link`, keyboard focus and `aria-label` on icon buttons. - **Secrets**: validated env module, nothing secret behind `NEXT_PUBLIC_`. - **Working style**: smallest change that solves the task, state assumptions, update all callers when a signature changes, pass the project's own type check and lint scripts.
**About the file name**
Cursor reads a `.cursorrules` file in the project root. Newer Cursor versions also support project rules in `.cursor/rules/`, and treat `.cursorrules` as the legacy option. The content works in either place; if you move it, save it as a rule file under `.cursor/rules/` and set it to always apply.
**What it will not do**
It does not pick your auth, database or test libraries; it tells the assistant to use what is already in the repo. It does not pin a Next.js version. Remove rules that conflict with your project, such as the Zod rule if you validate with another library.
How to use it
1. Copy `.cursorrules` to the root of your Next.js project. 2. Read it once and remove or edit rules that do not match your project (for example, if you use a different validation library than Zod, or have no `cn()` helper). 3. Restart Cursor or reopen the project so the rules are picked up. 4. Optional: if your Cursor version uses project rules, create `.cursor/rules/nextjs.mdc` with the same content and mark it to always apply, then delete `.cursorrules`. 5. Other agents: the same text works as the body of `AGENTS.md` or `CLAUDE.md` if you use other coding assistants on the same repo.
Files
Save each file at the path shown, relative to your project root.