Learn the concept
File-Based Routing
Next.js uses a file-system based router where files and folders in the `app/` directory (recommended) or legacy `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 URLParams as Promise (Next.js 16):
In Next.js 16, params is a Promise that must be awaited before accessing its values. This applies to all page and layout components.
app/
├── 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 # /featuresUse catch-all routes (`[...slug]`) to map a docs tree from a CMS or file system into nested URL paths, with route groups for organizing marketing vs docs layouts.
Use dynamic routes like `[orgSlug]/dashboard` to create tenant-specific pages, with middleware validating the org slug and layout components providing tenant branding.
Map blog categories and posts to nested routes (`/blog/[category]/[slug]`), using `generateStaticParams` to pre-render popular posts and dynamic rendering for the rest.
Build a wiki with catch-all routes that reads markdown files from a local directory. Include a sidebar with auto-generated navigation based on the file structure, demonstrating route groups and nested layouts.
Create a dashboard app using route groups — `(auth)` for login/register with a minimal layout, and `(dashboard)` for authenticated pages with sidebar navigation, demonstrating how route groups share layouts without affecting URLs.
Hashnode uses Next.js file-based routing to serve millions of blog posts under custom domains, mapping dynamic `[slug]` routes to user-generated content.
Cal.com leverages nested dynamic routes (`/[user]/[eventType]`) for booking pages, with parallel routes for modal-based scheduling interactions.