React / Next.js core

Server-first by default: render on the server, fetch on the server, ship a client component only where the page needs interactivity. [[z-ts-core]] covers tsconfig, zod, and general TS conventions this skill assumes.

Detect the project first

Before applying any rule below, identify what the project actually is: the framework (Next.js or plain React), the router (App Router app/, Pages Router pages/, or a client router such as React Router), and the rendering mode (server-rendered, static, or client-only SPA). Read package.json dependencies and the route directory shape — do not assume.

The App Router structure, Server components, Data fetching, Forms and server actions, and Suspense/error boundary sections apply to Next.js App Router projects only. A Pages Router project takes the same server-first intent through getServerSideProps and API routes. A plain React SPA follows the branch below.

Plain React SPA branch

No server directives, no 'use client', no Server Actions exist here. Route with the project's client router and keep routes lazy so the initial bundle stays small. Fetch on the client but not in a bare mount effect: use the project's data layer (TanStack Query, SWR) for caching and deduplication, or a useEffect that aborts its fetch on cleanup and guards setState after unmount. Everything else in this skill — state judgment, component discipline, testing, render performance — still applies.

App Router structure

File-system routing under app/ — a folder is a route segment, page.tsx makes it navigable, layout.tsx wraps it and persists across sibling navigations: