nextjs-app-router
Installation
SKILL.md
Next.js 16 App Router Patterns
Covers App Router-specific patterns for Next.js 16, React 19, TypeScript, Tailwind, tRPC, Better Auth, Vercel. This skill fills the gap left by
react-dev— focus here is on routing, caching, and server/client boundaries.
Data Fetching Hierarchy
The mental model: where data lives determines how you fetch it.
| Layer | Pattern |
|---|---|
| Server Component | await fetch() or await createCaller(ctx).router.procedure() directly |
| Client Component | tRPC React Query hooks (trpc.router.procedure.useQuery()) |
| Layout | Fetch shared data once (session, org context); pass via React Context or props |
cache() from React |
Deduplicate identical fetches within a single request — NOT across requests |