What is the Next.js App Router folder structure and special files?

The App Router uses specific file conventions within the app/ directory: Route files: page.tsx — unique UI for a route (makes it publicly accessible); layout.tsx — shared UI, persists across navigations within its segment; template.tsx — like layout but re-mounts on each navigation (for animations, per-route state); loading.tsx — Suspense fallback; error.tsx — error boundary; not-found.tsx — 404 UI (triggered by notFound()); route.ts — API endpoint (HTTP method exports). Metadata files: icon.png / apple-icon.png — favicon; opengraph-image.png — OG image; robots.ts — robots.txt generator; sitemap.ts — sitemap.xml generator; manifest.ts — web app manifest. Folder conventions: [param] — dynamic segment; [...param] — catch-all; [[...param]] — optional catch-all; (group) — route group (no URL effect); _private — opted out of routing; @slot — named slot for parallel routes. Parallel routes: app/@modal/page.tsx — simultaneously render multiple pages; consumed in layout via { modal }: { modal: React.ReactNode }. Intercepting routes: app/(.)photo/[id]/page.tsx — intercept navigation to show a modal while keeping the current page. Global files: app/global-error.tsx — catch root layout errors; app/favicon.ico.