app-router

# Next.js App Router Patterns ## Overview The App Router is Next.js's file-system based router built on React Server Components. It uses a `app/` directory structure where folders define routes and special files control UI behavior. ## Core File Conventions ### Route Files Each route segment is defined by a folder. Special files within folders control behavior: | File | Purpose | |------|---------| | `page.tsx` | Unique UI for a route, makes route publicly accessible | | `layout.tsx` | Shared UI wrapper, preserves state across navigations | | `loading.tsx` | Loading UI using React Suspense | | `error.tsx` | Error boundary for route segment | | `not-found.tsx` | UI for 404 responses | | `template.tsx` | Like layout but re-renders on navigation | | `default.tsx` | Fallback for parallel routes | ### Folder Conventions | Pattern | Purpose | Example | |---------|---------|---------| | `folder/` | Route segment | `app/blog/` → `/blog` | | `[folder]/` | Dynamic segment | `app/blog/[slug]/` → `/blog/:slug` | | `[...folder]/` | Catch-all segment | `app/docs/[...slug]/` → `/docs/*` | | `[[...folder]]/` | Optional catch-all | `app/shop/[[...slug]]/` → `/shop` or `/shop/*` | | `(folder)/` | Route group (no URL) | `app/(marketing)/about/` → `/about` | | `@folder/` | Named slot (parallel routes) | `app/@modal/login/` | | `_folder/` | Private folder (excluded) | `app/_components/` | ## Creating Routes ### Basic Route Structure To create a new route, add a folder with `page.tsx`: ...