frontend-nextjslisted
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