# 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.