Next.js Architecture Rules

This skill is the definitive source for Next.js App Router architecture rules. Any agent (architect, dev, or otherwise) should load this skill for authoritative rules on the server/client boundary, data access, routing, caching, auth, and design style.

1. Stack

Expected stack: Next.js 15+ (App Router) + React 19 + TypeScript + Tailwind CSS v4 + shadcn/ui

• pnpm (package management)
• App Router only — no pages/ directory, no getServerSideProps / getStaticProps / getInitialProps
• Function components only — no legacy class components (except error.tsx boundaries, which are function components too)
• Tailwind v4 syntax used (no tailwind.config.js color overrides — use CSS variables)
• shadcn/ui primitives used for UI — not custom-rolled replacements
• next/image for all images, next/font for all fonts — never raw <img> or <link rel="stylesheet"> font tags
• next/link for all internal navigation — never bare <a href="/...">