WINDSURF RULESNext.js 15 App Router Windsurf Cascade Rules
Generate Windsurf Cascade rules for Next.js 15 App Router in .windsurf/rules/, with the stack's conventions and checks. Windsurf's Cascade agent reads rules from .windsurf/rules/. This rule gives Cascade the Next.js 15 App Router conventions, commands and patterns to avoid, so its edits follow the stack instead of generic or outdated defaults.
.windsurf/rules/nextjs-15.mdWhat this file changes for Next.js 15 App Router
Windsurf's Cascade agent reads rules from .windsurf/rules/. This rule gives Cascade the Next.js 15 App Router conventions, commands and patterns to avoid, so its edits follow the stack instead of generic or outdated defaults.
Next.js 15 App Router: code to avoid and code to write instead
"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 };
}How to Install Next.js 15 App Router Windsurf Cascade Rules via Terminal
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:
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.
mkdir -p ".windsurf/rules" && curl -fsSL "https://www.devscratchpad.tech/api/raw/windsurf-rules/nextjs-15" -o ".windsurf/rules/nextjs-15.md"Step 3: Check that Windsurf Cascade uses it
Cascade reads rules in .windsurf/rules/ and applies this one according to its trigger.
Windsurf rules generator: Cascade rules for your stack
Windsurf Cascade Rules: how it works, where the file goes, and every Windsurf preset.
Tools for Next.js 15 App Router work
Browser-based utilities to test, format and inspect the code your AI tool writes. Nothing you paste is uploaded.
JSON to TypeScript Interfaces
Instantly infer TypeScript interfaces from a JSON payload.
JSON to Zod Schema
Infer Zod validation schemas directly from JSON payloads.
SVG to JSX Converter
Convert raw SVG markup into a React JSX component.
JWT Decoder & Inspector
Decode JSON Web Tokens locally. Inspect header and claims, and verify HS256 signatures with your secret.
Live Repository & Schema Ingestion
Inspect any public or private GitHub repository, or paste SQL DDL and Prisma models directly in AI Skill Studio to auto-generate authentic rules. Zero server transmission.
Migrating from Legacy .cursorrules or CLAUDE.md?
Use the free, in-browser converter to turn one long rules file into Cursor .mdc, Claude SKILL.md or Windsurf rules.
Technical FAQ: Next.js 15 App Router AI Rulebooks
Where do I save this Windsurf rule?
Save it as .windsurf/rules/nextjs-15.md in your project. Cascade picks up rules in that folder automatically.
When does Windsurf apply this rule?
According to the trigger in its frontmatter: always on, on a glob match, when Cascade decides the description fits the task, or when you @-mention it.