How to Write Bulletproof Cursor Rules for Next.js 15 (App Router & Server Actions)

By Cursor Rules Engineering Team • Updated September 2026 • 8 min read

Generate Next.js 15 + Tailwind + Supabase rules instantly:

Customized .mdc files ready to download as a pre-packaged zip.

Next.js 15 is one of the most popular full-stack frameworks, but Large Language Models (LLMs) notoriously struggle with it. Because older training datasets are saturated with Pages Router code (getServerSideProps, pages/api/), Cursor will frequently default to legacy patterns or scatter 'use client' at the top of every file.

Top 4 Hallucinations AI Makes in Next.js 15

Overusing 'use client': Making entire page components client-side simply to add a single interactive button, destroying server-side rendering performance.
Unvalidated Server Actions: Treating Server Actions like trusted internal functions rather than exposed public HTTP POST endpoints.
Legacy Routing Conventions: Mixing next/router (Pages Router) instead of next/navigation (App Router).
Missing Metadata API: Using deprecated <Head> tags instead of Next.js 15's native generateMetadata export.

The Complete .cursor/rules/nextjs.mdc Rule File

Save the following configuration inside your repository at .cursor/rules/nextjs.mdc:

---
description: Next.js 15 App Router, React Server Component, and Server Action standards
globs: app/**/*.{ts,tsx},components/**/*.{ts,tsx}
alwaysApply: false
---

# Next.js 15 & React 19 Architectural Rules

## 1. Server Components vs Client Components
- Treat all components in \`app/\` and \`components/\` as React Server Components (RSC) by default.
- Never add \`'use client'\` to root page or layout components.
- Push client boundaries to the leaves of your component tree. Extract buttons, modal popups, and form inputs into isolated client sub-components.

## 2. Server Actions Security & Validation
- Mark all server mutations with \`'use server'\`.
- Always validate every input argument inside Server Actions using Zod schemas. Never trust raw client arguments.
- Return typed, serializable responses: \`{ success: boolean, data?: T, error?: string }\`.

## 3. Navigation & Routing
- Always import from \`next/navigation\` (\`useRouter\`, \`usePathname\`, \`redirect\`).
- Never import from legacy \`next/router\`.
- Use \`next/link\` with typed \`href\` routes.

## 4. Performance & Media
- Always use \`next/image\` with explicit \`alt\`, \`width\`, and \`height\` (or \`fill\`).
- Leverage \`next/font/google\` for web font loading to prevent layout shifts.

Why the `globs` Header is Critical

Notice the frontmatter pattern: globs: app/**/*.{ts,tsx},components/**/*.{ts,tsx}. This ensures that these Next.js instructions are loaded only when you are modifying your React and routing files. When editing your database schema, Dockerfile, or testing scripts, Cursor skips loading this rule, keeping context tokens lean and focused.

Build Your Full Next.js 15 Rules Package

Combine Next.js 15 rules with Tailwind CSS v4, Supabase, and Strict TypeScript in a single download.

Generate .cursor/rules.zip Now →