Next.js uses a file-system based router where files and folders in the `app/` (or `pages/`) directory automatically become routes - `app/about/page.tsx` becomes `/about`.
File-based Routing Basics:
Next.js has two routing systems:
app/ directory with page.tsx filespages/ directory where each file is a routeApp Router Conventions:
page.tsx - Makes a route publicly accessiblelayout.tsx - Shared UI for a segment and its childrenloading.tsx - Loading UI while content loadserror.tsx - Error UI for a segmentnot-found.tsx - 404 UIRoute Types:
app/about/page.tsx → /aboutapp/posts/[id]/page.tsx → /posts/123app/docs/[...slug]/page.tsx → /docs/a/b/capp/shop/[[...slug]]/page.tsx → /shop or /shop/a/bRoute Groups:
(marketing) organize routes without affecting URLapp/
├── page.tsx # / (home)
├── layout.tsx # Root layout (wraps all pages)
├── about/
│ └── page.tsx # /about
├── blog/
│ ├── page.tsx # /blog (list)
│ └── [slug]/
│ └── page.tsx # /blog/my-post (dynamic)
├── docs/
│ └── [...slug]/
│ └── page.tsx # /docs/intro/getting-started (catch-all)
└── (marketing)/ # Route group (no URL segment)
├── pricing/
│ └── page.tsx # /pricing
└── features/
└── page.tsx # /features