Next.js 15 App Router Windsurf Cascade Rules

Production-grade architectural rulebook for Next.js 15 App Router. Engineered to eliminate LLM hallucinations, enforce strict deterministic conventions, and prevent architectural drift across Cursor IDE, Claude Code CLI, and autonomous multi-agent pipelines.

Target Path
.windsurf/rules/nextjs-15.md
Execution Scope
Project Context
Specification Format
Markdown / Config
AI Tool Support
Universal AI Assistants
02 / DRIFT ANALYSIS & VALUE PROPOSITION

Failure Patterns Prevented for Next.js 15 App Router

Without This Rule (Default LLM Behavior)Vulnerable

Next.js 15 introduces asynchronous cookies/headers, strict caching defaults (uncached fetch by default), and Server Actions. Without explicit cursor rules, LLMs frequently hallucinate outdated pages/ router conventions, unnecessary 'use client' directives, and sync request APIs.

Hallucination Symptoms
  • Invokes deprecated or removed APIs from older model training weights
  • Generates conflicting configuration files and invalid imports
  • Silently drops type-safety, boundaries, or transaction isolation
With This Rule (Guaranteed Invariants)Deterministic
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 asynchronous Next.js 15 APIs (cookies(), headers(), params, searchParams).
Avoid pages/ directory conventions or legacy getServerSideProps.
Colocate loading.tsx and error.tsx for dynamic route segments.
03 / VERIFIED CODE PATTERNS

Code Standards: Anti-Pattern vs Verified Implementation

Discouraged Anti-Pattern
"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>;
}
Verified Production Standard
"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 };
}
04 / REPOSITORY PLACEMENT & 3-STEP TERMINAL INSTALLATION

How to Install Next.js 15 App Router Windsurf Cascade Rules via Terminal

1

Step 1: Open Project Directory & Verify Target Placement

Open your terminal and navigate to your project root folder where the .windsurf/rules/nextjs-15.md file will reside. Ensure the file is placed at the exact path below relative to your project root so the AI engine automatically loads it:

.windsurf/rules/nextjs-15.md
2

Step 2: Fetch Rule File via Terminal Command

Run curl, PowerShell, or wget to stream the rule directly from the DevScratchpad raw API endpoint and write it to .windsurf/rules/nextjs-15.md:

Terminal One-Liner Install

Run directly in your project root to stream and write this rule file with one command.

Raw API Stream
$mkdir -p ".windsurf/rules" && curl -fsSL "https://www.devscratchpad.tech/api/raw/windsurf-rules/nextjs-15" -o ".windsurf/rules/nextjs-15.md"
3

Step 3: Verify and Activate with AI Agent

Launch your AI coding assistant (Universal AI Assistants). The assistant will automatically discover .windsurf/rules/nextjs-15.md in your repository and apply the architectural guardrails, type constraints, and verification protocols during code generation.

05 / ROUTE DIRECTORY & CROSS-TOOLING
Format Pillar HubComprehensive Manual

Windsurf Cascade Rules Directory & Generator

Inspect the complete specification manual, glob patterns, directory rules, and all available presets in our central directory.

/windsurf-rules Directory
06 / RECOMMENDED OFFLINE DEVELOPER TOOLS

Pair With Next.js 15 App Router Client-Side Utilities

100% private, browser-based utilities to test, format, and inspect code generated by your AI rules.

View All 28 Tools

Migrating from Legacy .cursorrules or CLAUDE.md?

Use our free, offline converter to transform monolithic rulebooks into modular Cursor .mdc, Claude SKILL.md, and Windsurf Cascade rules.

Convert Rules Free →
07 / FREQUENTLY ASKED QUESTIONS

Technical FAQ: Next.js 15 App Router AI Rulebooks

Why do I need specific Cursor rules for Next.js 15?

Next.js 15 changes key assumptions: asynchronous headers/cookies, un-cached fetch by default, and React 19 hooks. MDC rules ensure Cursor generates compliant modern code rather than legacy Next.js 13/14 or pages/ router patterns.

Where do I save this .mdc file?

Save it to `.cursor/rules/nextjs-15.mdc` in your project root. Cursor will automatically attach it when editing files under `src/app/`.