Next.js 15 App Router + TypeScript
Server Components by default, async params/cookies, typed Server Actions with Zod, Drizzle migrations, security headers, Vitest + Playwright.
Download free sample (2 files)Buy · $12
Included files
| File | Covers | Rules | Scope |
|---|---|---|---|
00-core.mdc | Core conventions for a Next.js 15 App Router + TypeScript project | 8 | Always on |
10-routing-components.mdc in free sample | App Router files, Server/Client Components and data fetching | 9 | Auto-attaches to src/app/**/*.tsx src/app/**/*.ts src/components/**/*.tsx src/features/**/*.tsx |
20-server-actions-errors.mdc in free sample | Server Actions, Route Handlers, validation and error handling | 8 | Auto-attaches to src/features/**/actions.ts src/app/**/route.ts src/lib/**/*.ts |
30-database.mdc | Database access with Drizzle ORM and migrations | 8 | Auto-attaches to src/lib/db/**/*.ts src/features/**/queries.ts src/features/**/actions.ts drizzle/** drizzle.config.ts |
40-security.mdc | Auth, authorization and web security for Next.js | 8 | Auto-attaches to src/middleware.ts src/lib/auth/**/*.ts src/features/**/actions.ts src/app/**/route.ts next.config.ts |
50-testing.mdc | Testing with Vitest, Testing Library and Playwright | 7 | Auto-attaches to src/**/*.test.ts src/**/*.test.tsx e2e/**/*.ts vitest.config.ts playwright.config.ts |
60-naming-style.mdc | TypeScript/React naming and style | 7 | Auto-attaches to src/**/*.ts src/**/*.tsx |
CLAUDE.md | Claude Code project instructions — sections: Commands, Architecture, Mutations & errors, Database, Security, Testing, Style | 18 | Always on (Claude Code) |
README.md | Install steps for Cursor and Claude Code, customization notes | – | – |
Preview: 10-routing-components.mdc (from the free sample)
# Routing, components & data fetching
- Route files: `page.tsx`, `layout.tsx`, `loading.tsx`, `error.tsx` (must be `"use client"`), `not-found.tsx`, `route.ts`. Route groups `(marketing)`, private folders `_components`.
- In Next.js 15 `params` and `searchParams` are Promises: `export default async function Page({ params }: { params: Promise<{ id: string }> }) { const { id } = await params; }`. Same for `cookies()` and `headers()` — always `await` them.
- Fetch data in Server Components by calling `src/features/<f>/queries.ts` functions directly. Don't call your own Route Handlers from Server Components.
- `fetch` is not cached by default in Next 15: opt in explicitly with `{ next: { revalidate: N, tags: [...] } }` or `"use cache"` only if enabled. Be explicit about caching on every external fetch.
- Use `<Link>` for navigation, `next/image` for images (with `width`/`height` or `fill` + `sizes`), `next/font` for fonts.
- Export `metadata` or `generateMetadata` from every `page.tsx`.
- Wrap slow sections in `<Suspense>` with a skeleton rather than blocking the whole page.
- Components: named exports, one component per file, file name `kebab-case.tsx`, component `PascalCase`. Props type named `<Component>Props`.
- Never pass non-serializable values (functions other than Server Actions, class instances, Dates→ convert to ISO string) from Server to Client Components.