Frontend · Cursor
Next.js 16 Cursor Rules Generator (.mdc)
Generate strict Next.js 16 App Router Cursor rules with React Server Components, Server Actions, and Zod validation.
- Path
- .cursor/rules/nextjs-16.mdc
- Loads
- Glob pattern match
- Format
- Frontmatter MDC (.mdc)
- Used by
- Cursor
What this file tells the agent
In Next.js 16, params, searchParams, cookies() and headers() are async only, caching is opt-in with "use cache", and middleware.ts became proxy.ts. Models trained on older code still write the pages/ router, unnecessary 'use client' directives and sync request APIs; these rules steer Cursor to current code.
- Enforce React Server Components (RSC) by default; restrict 'use client' strictly to interactive leaf components.
- Mutate state exclusively via Server Actions with Zod safeParse validation.
- Await the async request APIs (cookies(), headers(), params, searchParams); Next.js 16 removed the sync forms.
- Avoid pages/ directory conventions or legacy getServerSideProps.
- Colocate loading.tsx and error.tsx for dynamic route segments.
Code to avoid, and what to write instead
The rule steers the agent away from the left and toward the right.
"use client";
export function SaveItem() {
const submit = async (e: any) => {
e.preventDefault();
await fetch("/api/items", { method: "POST", body: JSON.stringify({ title: "Test" }) });
};
return <button onClick={submit}>Save</button>;
}"use server";
import { z } from "zod";
import { db } from "@/lib/db";
const Schema = z.object({ title: z.string().min(3) });
export async function createItem(formData: FormData) {
const parsed = Schema.safeParse(Object.fromEntries(formData));
if (!parsed.success) return { ok: false, errors: parsed.error.flatten().fieldErrors };
await db.item.create({ data: parsed.data });
return { ok: true };
}Install it in one command
- 01
Go to your project root
The file goes at .cursor/rules/nextjs-16.mdc, relative to the root.
- 02
Download the file
Run the command on the right. It downloads this preset and writes the file.
- 03
Make sure it gets used
Cursor picks up rules in .cursor/rules/ automatically. This one attaches when files matching its globs are in the request, or when you @-mention it.
$ mkdir -p ".cursor/rules" && curl -fsSL "https://www.devscratchpad.tech/api/raw/cursor-rules/nextjs-16" -o ".cursor/rules/nextjs-16.mdc"
writes .cursor/rules/nextjs-16.mdc
.cursor/rules/nextjs-16.mdc
To write the file from your own code instead, use Read your code or Convert Legacy Rules in the editor above.
More for Next.js 16 App Router
Questions
- Why do I need specific Cursor rules for Next.js 16?
- Next.js 16 changes key assumptions: async-only request APIs, opt-in caching with "use cache", proxy.ts instead of middleware.ts, and React 19.2. The rules keep Cursor on current App Router code rather than Next.js 13/14 or pages/ router patterns.
- Where do I save this .mdc file?
- Save it to `.cursor/rules/nextjs-16.mdc` in your project root. Cursor will automatically attach it when editing files under `src/app/`.