Next.js App Router
Updated 2026-02-09
App Router file conventions: layouts, pages, loading, and error handling. Route segments and metadata.
File conventions
page.tsx = route UI. layout.tsx = shared layout (wraps page). loading.tsx = loading UI. error.tsx = error boundary. not-found.tsx = 404. route.ts = API route.
Route segments
app/dashboard/page.tsx → /dashboard. app/blog/[slug]/page.tsx → /blog/:slug. Dynamic segment [slug]; catch-all [...slug]. layout wraps all segments below it.
Metadata
Export metadata = { title, description } from layout or page. For dynamic: export async function generateMetadata({ params }) { return { title: ... }; }.