Suggest an editImprove this articleRefine the answer for “How is a route formed in the app router?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)In the **Next.js App Router**, a route is formed exclusively by the folder structure and special files inside the `app/` directory: the URL is the path of folders from `app/` to `page.tsx`. **Key point:** a route exists only when `page.tsx` is present, and route groups and special files control rendering without affecting the URL.Shown above the full answer for quick recall.Answer (EN)ImageIn the **Next.js App Router**, a route is formed **exclusively by the folder structure and special files** inside the `app/` directory. The key idea: > **URL = the path of folders from** `app/` **to** `page.tsx` --- ## Basic rule Every route is a folder that contains a file: ``` page.tsx ``` Example: ```txt app/page.tsx → / app/blog/page.tsx → /blog app/blog/post/page.tsx → /blog/post ``` --- ## What is taken into account when forming a route ### 1. Folders Every folder adds a URL segment: ```txt app/products/shoes/page.tsx → /products/shoes ``` --- ### 2. `page.tsx` - a **required file** for the route - it is what forms the page - without it, the folder **is not a route** --- ### 3. Dynamic segments Square brackets are used: ```txt app/blog/[slug]/page.tsx → /blog/anything ``` - `[slug]` → route parameter - available on the server and client --- ### 4. Catch-all segments ```txt app/docs/[...slug]/page.tsx ``` URL: - `/docs/a` - `/docs/a/b/c` --- ### 5. Optional catch-all ```txt app/docs/[[...slug]]/page.tsx ``` URL: - `/docs` - `/docs/a` - `/docs/a/b` --- ### 6. Route Groups (do not affect the URL) ```txt app/(auth)/login/page.tsx → /login ``` - a folder in `()` - used **only for structure** - does not end up in the URL --- ### 7. `layout.tsx` - **does not add a URL segment** - sets the shared shell - inherited by nested routes --- ### 8. Special files They **do not affect the URL**, but participate in rendering: | File | Purpose | |---|---| | `layout.tsx` | Shared layout | | `loading.tsx` | Suspense loading | | `error.tsx` | Error boundary | | `not-found.tsx` | 404 | | `template.tsx` | State reset | --- ## Example of a complex route ```txt app/ ├─ (marketing)/ │ └─ blog/ │ └─ [slug]/ │ ├─ page.tsx │ └─ layout.tsx └─ (auth)/ └─ login/ └─ page.tsx ``` Result: - `/blog/my-post` - `/login` --- ## Common mistake > Thinking that a folder without `page.tsx` is a route > A route exists **only when** `page.tsx` **is present** --- ## Short interview answer > **In the App Router, a route is formed based on the path of folders from** `app/` **to** `page.tsx`**, with support for dynamic segments, route groups, and special files that control rendering but do not affect the URL.**For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.