Suggest an editImprove this articleRefine the answer for “What types of routing exist in Next.js?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)In **Next.js**, routing is built around the **file system**, but within it there are **several types of routing**, each solving its own task. **Key point:** Next.js has static, dynamic, catch-all, nested, group, parallel, and intercepting routing, and all of them are based on the file system.Shown above the full answer for quick recall.Answer (EN)ImageIn **Next.js**, routing is built around the **file system**, but within it there are **several types of routing**, each solving its own task. Below is a full, structured overview. --- ## 1. Static routing The most basic type. ```txt app/about/page.tsx → /about ``` - the URL is fixed - suits regular pages - minimal logic **When to use:** landing pages, info pages. --- ## 2. Dynamic routing The URL contains parameters. ```txt app/blog/[slug]/page.tsx → /blog/nextjs-routing ``` - `[param]` is a dynamic segment - available on the server and the client **When to use:** articles, product cards, profiles. --- ## 3. Catch-all routing Catches **any number of segments**. ```txt app/docs/[...slug]/page.tsx ``` Example URLs: - `/docs/a` - `/docs/a/b/c` **When to use:** documentation, nested sections. --- ## 4. Optional catch-all routing The same, but segments are **optional**. ```txt app/docs/[[...slug]]/page.tsx ``` Example URLs: - `/docs` - `/docs/react` - `/docs/react/hooks` --- ## 5. Nested routing (Nested routes) Routes inside routes plus shared layouts. ```txt app/dashboard/layout.tsx app/dashboard/page.tsx app/dashboard/settings/page.tsx ``` - a shared layout - independent pages inside **When to use:** dashboards, panels, SaaS. --- ## 6. Route Groups (grouping routes) Grouping **without affecting the URL**. ```txt app/(auth)/login/page.tsx → /login app/(auth)/register/page.tsx → /register ``` - a folder in parentheses doesn't end up in the URL - clean architecture **When to use:** auth, admin, marketing zones. --- ## 7. Parallel Routes Several independent UI areas on one URL. ```txt app/dashboard/@stats/page.tsx app/dashboard/@feed/page.tsx ``` - different data sources - independent rendering **When to use:** dashboards, complex interfaces. --- ## 8. Intercepting Routes Lets you **intercept navigation**. Example: - `/photos/123` opens as a **modal** - on a direct navigation - as a page **When to use:** modal windows, overlays. --- ## 9. Client-side routing (Navigation) Navigation without a page reload: - `<Link />` - `router.push()` Works on top of server-side routing. --- ## Summary table | Type | What it's for | |---|---| | Static | Regular pages | | Dynamic | Content by parameters | | Catch-all | Any depth | | Optional catch-all | Root + nesting | | Nested | Shared layouts | | Route Groups | Architecture without URL impact | | Parallel | Several UI areas | | Intercepting | Modals and overlays | | Client-side | SPA navigation | --- ## Interview answer > **Next.js has static, dynamic, catch-all, nested, group, parallel, and intercepting routing. All of them are based on the file system and let you build both simple and very complex interfaces without manual configuration.**For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.