← ClaudeAtlas

frontend-nextjslisted

Next.js frontend stack conventions — App Router, Server/Client Components, data fetching (e.g. Optimizely Graph), npm build specifics. Load when the resolved frontend stack is nextjs.
johantor/zion · ★ 1 · Web & Frontend · score 63
Install: claude install-skill johantor/zion
# Frontend: Next.js You are working in a Next.js frontend: App Router, React Server Components (RSC) and Client Components, and data fetching from the project's headless CMS/API (e.g. Optimizely Graph). ## Server/client split - **Server Components** run on the server: data fetching, no browser APIs, no event handlers. Prefer them by default. - **Client Components** (`"use client"`) are for interactivity — state, effects, browser APIs, event handlers. Keep the client boundary as small as possible; push data fetching to the server. ## Route-handler ownership Route handlers (`app/**/route.ts`) are server logic that happens to live inside the frontend app directory — that makes them **tank's lane by concern**, not yours, the same way Razor's `@functions`/`@code` blocks are tank's inside a `.cshtml` file you otherwise own the markup of. Don't implement route-handler business logic yourself; coordinate the data contract with tank. `lane-guard.sh` enforces this by path when lanes are directory-based (same-language stacks); don't rely on that alone — the rule holds regardless of enforcement mode. ## Build A file-lock/in-use error (`EBUSY`/`EPERM`/`EACCES`, a locked `.next`/bundler cache) during the one-shot build is **environmental** (a running dev server/watcher is locking outputs), not a code error — report it as such. Never run a watch/dev/serve command (`npm run dev`, `next dev`) as the build — those never terminate. ## Docs When a docs MCP (e.g. Context7) is avail