Next.js App Router

---
description: Next.js App Router conventions for this repo — server first, async params, no Pages Router APIs
globs: **/*.{ts,tsx,js,jsx}
alwaysApply: false
---

# Next.js App Router

This project uses the App Router. Do not introduce Pages Router APIs.

## Rendering

- Default to Server Components. Add `"use client"` only for event handlers, browser APIs, or client-only libraries.
- Fetch data in Server Components. Do not add `useEffect` + `fetch` for data the server already has.
- `params` and `searchParams` are async. Always `await` them in pages, layouts, and metadata.
- `cookies()` and `headers()` are async. Await them.

## Files

- Routes live under `src/app`. Colocate private helpers in `_components` only when they are used by one route.
- Shared UI goes in `src/components`. Shared content goes in `src/content`.
- Metadata is exported from the route, not from `next/head`.

## Client boundaries

- Keep client leaves small. A page that is a Server Component wrapping a client toolbar is better than a fully client page.
- Pass serializable props across the boundary. Do not pass functions from server to client except as server actions.

## Don’t

- `getServerSideProps`, `getStaticProps`, `next/router`, `next/head`.
- `middleware.ts` — this stack uses `proxy.ts` if request interception is needed.
- Importing a client component just to use `cn()` or to render static markup.