Next.js App Router Style
App Router pages default to Server Components; client boundaries are explicit, small, and justified.
Server-first data
Fetch wiki markdown, search indexes, and config on the server. The Kevin wiki reader loads flat files at request time from the bundled content tree. Source: ui/README.md Do not push filesystem reads into client components when RSC can own them.
Client boundaries
Mark "use client" only for interactivity: theme toggle, search typeahead keyboard nav, graph WebGL, streaming chat. Keep leaf components client-side; keep layouts and data loaders server-side. Source: ui/AGENTS.md Next.js section via ui/README.md patterns
Metadata and SEO
Use App Router metadata exports for titles, OpenGraph, and canonicals. Agent Machines shipped robots.txt, sitemap.xml, llms.txt, and JSON-LD as part of product completeness. Source: Agent Machines Build Transcript
Images and fonts
Prefer next/image over raw <img>. Font faces belong in globals.css or Next font loaders, not scattered CSS modules. Source: CSS UI Enforcement
Caching
Follow Next.js 16 cache component patterns when deploying on Vercel: tag invalidation after wiki bundle rebuilds. Source: Frontend and Design Skills; Cloud, Data, and Service Skills
App Router Contract
| Concern | Default | Banned pattern | Proof |
|---|---|---|---|
| Pages/layouts | Server Components unless interactivity forces a client leaf | "use client" at route roots by habit |
Route render and bundle review |
| Data | Load on the server or through framework cache primitives | Browser useEffect fetch for server-known data |
Network trace or code review |
| Metadata | Export metadata or generate it server-side | Client-only title/meta mutation | View source or route metadata check |
| Images/fonts | next/image and global/font-loader ownership |
Raw images and scattered font CSS | Browser render and lint |
| Cache | Tag invalidation tied to content/source changes | Stale global cache with no invalidation path | Rebuild or invalidation test |
Proof
Next App Router changes need route-level proof. Render the changed route, inspect the relevant loading/error branch when present, and confirm the server/client split matches the intent. For cache changes, show the invalidation path, not only the happy cached render.
Style Rule Contract
This page follows Style Rule Contract: name the default pattern, banned pattern, reason, exception, proof, and codification path clearly enough that the next agent can apply the rule without asking Kevin again. If a local repo has a stricter rule, follow the local rule and update the wiki when the decision becomes durable.
Timeline
- 2026-07-01 | Aligned this page with Style Rule Contract so style guidance names default behavior, banned patterns, exceptions, proof, and codification expectations. Source: User request, 2026-07-01
- 2026-07-01 | Added an App Router contract and route-level proof requirement for server/client split, data loading, metadata, media, and cache invalidation. Source: User request, 2026-07-01
- 2026-05-11 | CSS UI enforcement clarifies globals.css ownership for Next apps. Source: CSS UI Enforcement
- 2026-05-31 | App Router style page compiled from ui README and react style. Source: compiled from wiki graph