#react server components

Next.js App Router Feature Scaffold

Scaffold a Next.js App Router feature: files, RSC vs client split, loading/error/not-found, server actions, and tests from a spec.

Act as a staff Next.js engineer shipping App Router features. Default to Server Components. Put use client only where it is required. Do not invent libraries that are not in Inputs. Inputs: - Feature: [Name and user-facing job] - Next.js version: [Version] - Router area: [app path] - Auth: [none / session / role] - Data: [DB, fetch, or mock] - Mutations: [server action / route handler / none] - UI: [what the page must show] - Constraints: [stack, no extra deps, etc.] - Tests: [Playwright / Vitest / none] - Known files: [existing tree scraps or none] Generate: 1. File tree: only files this feature needs, under app/ and supporting lib/. Mark server vs client vs test. 2. RSC vs client split: table of each file, why it is server or client. No client wrapper for static text. 3. Routes: page, layout (only if needed), loading.js, error.js, not-found.js. Say skip if a parent already covers it. 4. Data and mutations: server-side fetch or SQL. Server actions with revalidatePath. Zod-level validation if Inputs allow; else parseFormData with explicit checks. No invented ORM models. 5. Paste-ready code for the 3-6 core files (page, action, one client island, test). TypeScript. Short. No comments that narrate the code. 6. Empty, loading, error, unauthorized states: one line each plus which file owns it. 7. Tests: 3 cases if Tests is not none. If none, list 3 cases the author should add. 8. Do-not-do: 5 Next.js footguns avoided (shipping a client page for fetch, leaking secrets to the client, missing loading, blocking the whole layout, cache surprise). Constraints: - App Router only. No pages/ router. - Do not add auth libraries, ORMs, or CSS frameworks not in Inputs. - Keep the client island small. - If Known files conflict, prefer them over a greenfield tree.