--- name: output-structure description: Next.js App Router file conventions metadata: tags: nextjs, structure, app-router --- # Output Structure ## Recommended Tree ``` src/ ├── app/ │ ├── page.tsx │ ├── layout.tsx │ └── globals.css ├── components/ │ └── sections/ │ ├── navigation.tsx │ ├── hero.tsx │ └── ... public/ ├── assets/ └── fonts/ ``` ## Section File Rules - One top-level component per file - Default export named after the section - Keep `id` attributes for scroll links - Avoid shared state between sections ## `page.tsx` Conventions - Import sections in document order - Wrap in a `main` element with global background - No data fetching or side effects in the page ## `layout.tsx` Conventions - Register font families - Apply root `` and `` classes - Keep metadata minimal for the clone