← ClaudeAtlas

functional-typescript-react-nextjslisted

Use when placing logic across the server and client boundary in Next.js, writing a Server Action, invalidating a cache after a mutation, or deciding what may cross.
yutna/functional-design-skills · ★ 0 · Web & Frontend · score 75
Install: claude install-skill yutna/functional-design-skills
# Functional Next.js ## Overview Next.js adds one thing to React that changes the design: a boundary between server and client, with a network in the middle. That boundary is the pure core and shell split, made physical. Where React lets you put a rule in the wrong place, this makes the wrong place cost a round trip, a serialisation, or a leaked secret. Everything about components, state and derivation is unchanged and lives in [functional-typescript-react](../functional-typescript-react/SKILL.md). This pack is only what the boundary adds. **Check the installed version before writing code.** The shapes below target the App Router on Next.js 16; the pages router puts the boundary somewhere else entirely. ## When to use - Deciding whether something is a server component or a client one - Writing a Server Action, or the form that calls it - Choosing what data crosses the boundary and in what shape - Deciding where a cache is invalidated - Reviewing a change that moved logic across the boundary Not for: React itself, deployment, or routing configuration. ## Core rules 1. Rule. **The boundary is the core and shell split.** Decisions and data access on the server; interaction on the client. A rule that runs in both places is a rule that will disagree with itself. 2. Rule. **Anything crossing is a transfer type.** It is serialised, so it is a plain record with no methods, no class instances, and no invariants the other side is trusting. Parse it back into a doma