Next.js — Claude Code rules

You are working in a Next.js 15+/16 codebase using the App Router. Stick to the conventions below.

Defaults

• Server Components by default. Add "use client" only when the component needs interactivity, browser APIs, or React state. Never add it to a layout.
• Pages live under app/. Route segments use lowercase + hyphens. Parallel routes only when justified.
• Use <Link> from next/link for in-app navigation. Use next/image for raster images.
• All params and searchParams in page / layout / route handlers are Promises in Next 16. Always await them before destructuring.

Data fetching

• Fetch in Server Components when possible. Pass minimal serialisable data to client components.
• Use fetch(url, { cache: "no-store" }) for dynamic, { next: { revalidate: N } } for ISR.
• Never call client-only libraries (e.g. localStorage) from server code.
• Don't hand-roll loading skeletons — use loading.tsx segments where it makes sense.

TypeScript

• strict: true, noUncheckedIndexedAccess: true. Don't widen with any — narrow with unknown + guards.
• Component props get explicit type aliases; avoid inline React.FC and avoid React.FC altogether.

Style

• Tailwind is the default styling layer. Don't introduce CSS-in-JS without a strong reason.
• Use cn() (or clsx) for conditional classes; never string-concatenate Tailwind classes.

What not to do

• Don't use getServerSideProps / getStaticProps — those are Pages Router.
• Don't fetch from the client when the server can do it.
• Don't import server-only modules from a "use client" file.