nextjs-architectlisted

# Next.js Architecture Targets **Next.js 16** with **React 19**, **TypeScript strict**, **App Router only**. Builds on [react-architect](../react-architect/SKILL.md) for client-side patterns; this skill covers the Next-specific layers — server components, server actions, routing, data fetching, edge vs node, deployment. Concrete skeletons in [RECIPES.md](RECIPES.md); pinned dependencies in [STACK.md](STACK.md). ## 1. App Router only The Pages Router is legacy. New code lives in `app/`; if you inherit a Pages Router app, **don't mix** unless mid-migration. Folder layout reference in [RECIPES § App Router folder layout](RECIPES.md#app-router-folder-layout). Key conventions: - **`page.tsx`** = the route's UI. **`layout.tsx`** wraps it. Both default to server components. - **`loading.tsx`** wraps the route in Suspense automatically. - **`error.tsx`** is a client component that wraps the route in an ErrorBoundary. - **Route groups (`(name)`)** organize without adding URL segments. - **`@slot`** is a parallel route — independent loading/error states, rendered into named slots in the parent layout. ## 2. Server components by default, client when needed Every component is a **server component** unless you opt out with `"use client"`. The choice belongs to the leaf component that needs the client behavior — not the root. ### When to stay server - Pure rendering — no state, no effects, no event handlers. - Data fetching — `await db.query(...)`, `await fetch(...)`. - Secrets /