functional-typescript-react-nextjslisted
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