Build Next.js 15 apps with App Router, server components, caching, auth, and production patterns.
On first use, read setup.md for project integration.
User needs Next.js expertise — routing, data fetching, caching, authentication, or deployment. Agent handles App Router patterns, server/client boundaries, and production optimization.
Project patterns stored in ~/nextjs/. See memory-template.md for setup.
~/nextjs/
├── memory.md # Project conventions, patterns
└── projects/ # Per-project learnings
| Topic | File |
|---|---|
| Setup | setup.md |
| Memory template |
memory-template.md |
| Routing (parallel, intercepting) | routing.md |
| Data fetching & streaming | data-fetching.md |
| Caching & revalidation | caching.md |
| Authentication | auth.md |
| Deployment | deployment.md |
Everything is Server Component in App Router. Add 'use client' only for useState, useEffect, event handlers, or browser APIs. Server Components can't be imported into Client — pass as children.
Fetch in Server Components, not useEffect. Use Promise.all for parallel requests. See data-fetching.md for patterns.
fetch is cached by default — use cache: 'no-store' for dynamic data. Set revalidate for ISR. See caching.md for strategies.
Use 'use server' functions for form submissions and data mutations. Progressive enhancement — works without JS. See data-fetching.md.
NEXT_PUBLIC_ exposes to client bundle. Server Components access all env vars. Use .env.local for secrets.
Use <Suspense> boundaries to stream content progressively. Wrap slow components individually. See data-fetching.md.
Protect routes in middleware, not in pages. Middleware runs on Edge — lightweight auth checks only. See auth.md.
| Server Component | Client Component |
|---|---|
| Default in App Router | Requires 'use client' |
| Can be async | Cannot be async |
| Access backend, env vars | Access hooks, browser APIs |
| Zero JS shipped | JS shipped to browser |
Decision: Start Server. Add 'use client' only for: useState, useEffect, onClick, browser APIs.
| Trap | Fix |
|---|---|
router.push in Server | Use redirect() |
<Link> prefetches all | prefetch={false} |
next/image no size | Add width/height or fill |
| Metadata in Client | Move to Server or generateMetadata |
| useEffect for data | Fetch in Server Component |
| Import Server→Client | Pass as children/props |
| Middleware DB call | Call API route instead |
Missing await params (v15) | Params are async in Next.js 15 |
params and searchParams are now Promise — must awaitfetch not cached by default — opt-in with cache: 'force-cache'useActionState, useFormStatusInstall with clawhub install <slug> if user confirms:
react — React fundamentals and patternstypescript — Type safety for better DXprisma — Database ORM for Next.js appstailwindcss — Styling with utility classesnodejs — Server runtime knowledgeclawhub star nextjsclawhub sync