Suggest an editImprove this articleRefine the answer for “What is the key idea of routing in Next.js?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)The key idea of routing in **Next.js** is that **the app's URL is determined by the file and folder structure**, not by configuration in code. **Key point:** the folder structure directly corresponds to the URL, which removes configuration and simplifies the app's architecture.Shown above the full answer for quick recall.Answer (EN)ImageThe key idea of routing in **Next.js** is: **the app's URL is determined by the file and folder structure**, not by configuration in code. In short: > **Files = routes** --- ## What file-based routing is about You **don't describe routes manually**, like in React Router, you just create files: ```txt app/ ├─ page.tsx → / ├─ blog/ │ └─ page.tsx → /blog └─ blog/[slug]/ └─ page.tsx → /blog/anything ``` Next.js itself: - creates the routes - wires them up to the server - optimizes loading --- ## Why this matters ### 1. Minimal configuration - no router-config - no switch / routes - less boilerplate --- ### 2. Project structure = site structure - the project reads like a sitemap - easy to navigate - convenient to scale --- ### 3. Nesting and layouts Every folder can have: - `layout.tsx` - shared shell - `page.tsx` - content - `loading.tsx` - loading state - `error.tsx` - error handling This makes routing **declarative**. --- ## Dynamic routes ```txt products/[id]/page.tsx → /products/123 ``` - `[id]` - a URL parameter - available on both server and client --- ## Route groups ```txt (auth)/ login/page.tsx → /login ``` - the folder does not affect the URL - needed for logical structure --- ## Parallel and intercepting routes - several UI areas on the same URL - modals, sidebars, nested panels - complex interfaces without hacks --- ## Difference from React Router | React Router | Next.js | |---|---| | Routes in code | Routes in the file system | | Client-side | Server + client | | Manual optimization | Automatic code splitting | --- ## Short interview answer > **The key idea of routing in Next.js is that the file system determines the routes: the folder structure directly corresponds to the URL, which removes configuration and simplifies the app's architecture.**For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.