KeiSeiKit-1.0/_blocks/stack-nextjs.md

STACK — Next.js 15/16 (App Router + TS + Server Components)

Use for browser/DOM work. TypeScript is the default for this stack; consider Rust→wasm where viable.

Routing: App Router (app/) — NOT Pages Router (pages/). Server Components by default; "use client" directive ONLY on components that need useState / useEffect / event handlers / browser APIs.

Data flow:

• Read: Server Components call DB/API directly. No client-side fetching for initial render.
• Mutate: Server Actions ("use server" functions) — NOT ad-hoc API routes unless a third party needs to call them.
• Cache: fetch() in Server Components uses Next's fetch cache; opt out with cache: "no-store" or revalidate: N.

ORM: Drizzle OR Prisma — pick ONE per project, never both. Drizzle preferred for edge-runtime compatibility (Cloudflare Workers).

Env vars:

• Server-only: process.env.FOO (never leaks to client bundle).
• Client-visible: process.env.NEXT_PUBLIC_FOO — everything else is redacted in the browser.
• Secrets: platform vars (Vercel / Cloudflare), .env.local locally, NEVER in next.config.js (ships to client).

Typical paid-AI stack: Next.js 16 + TypeScript + Drizzle/SQLite + Tailwind 4 + shadcn. Files > 200 LOC get split on-the-spot (Constructor Pattern). For paid AI calls, track cost in integer microdollars (1 USD = 1e6 μ$) — floats forbidden for money.

Forbidden: Pages Router for new routes, "use client" at the top of pages that don't need interactivity (ships 30-100kb extra JS), Drizzle + Prisma together, secrets in next.config.js or inside NEXT_PUBLIC_*.