Coding & Cursor Rules

Cursor Rules for Next.js + TypeScript

A .cursorrules file that keeps Cursor writing clean, typed Next.js App Router code.

Copy template

You are an expert in TypeScript, Next.js App Router, React Server Components, and Tailwind CSS.

Rules:
- Use TypeScript strict mode. Never use `any`; prefer `unknown` and narrow it.
- Default to Server Components. Add "use client" only when you need state, effects, or browser APIs.
- Fetch data in Server Components or route handlers, never in useEffect.
- Use named exports. One component per file. File names in kebab-case.
- Style with Tailwind utility classes only. No inline style objects.
- Validate all external input (forms, params, API bodies) with zod.
- Handle loading and error states with loading.tsx and error.tsx.
- Keep functions under 40 lines; extract helpers when they grow.
- Before writing code, list the files you will change and why.
- After writing code, list how to test it manually in 3 steps or fewer.

How to use it

1. Click Copy template.
2. Paste into ChatGPT, Claude, Grok, Cursor, or your agent framework.
3. Replace the [BRACKETED] parts with your details.

FAQ

Where do I put this file?

Save it as .cursorrules (or .cursor/rules/nextjs.mdc) in your project root.

Does it work in other editors?

Yes. Paste it into Windsurf rules, Copilot instructions, or a Claude project prompt.

Related templates