---
description: Next.js App Router conventions
globs: **/app/**/*.{ts,tsx}
alwaysApply: false
---

- Use App Router (`app/`) unless the project explicitly uses Pages Router.
- Default to Server Components; add `"use client"` only when needed.
- Fetch data in Server Components; avoid client-side fetching for initial load.
- Use `loading.tsx`, `error.tsx`, and `not-found.tsx` for route segments.
- Colocate route handlers in `route.ts` files under `app/api/`.
- Use `next/image` for all images; specify width and height.
- Use `next/link` for internal navigation.
- Keep page components thin; extract UI into `components/`.
- Use `generateMetadata` for SEO on dynamic routes.