Suggest an editImprove this articleRefine the answer for “How does project structure affect routing 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 **follows directly from the folder structure**. Simply put: however you lay out the files, that's how the URLs look. No configs, no manual mapping. **Key point:** each folder is a URL segment, and `page.tsx` is the entry point.Shown above the full answer for quick recall.Answer (EN)ImageIn **Next.js**, routing **follows directly from the folder structure**. Simply put: *however you lay out the files, that's how the URLs look*. No configs, no manual mapping. ### The basic rule ``` app/ ├─ page.tsx → / ├─ blog/ │ └─ page.tsx → /blog └─ blog/post/ └─ page.tsx → /blog/post ``` **Each folder = a URL segment**, and `page.tsx` is the entry point. --- ## Key files and how they affect routing ### `page.tsx` Creates a page ``` app/profile/page.tsx → /profile ``` ### `layout.tsx` A wrapper for **all child routes** ``` app/dashboard/layout.tsx app/dashboard/page.tsx app/dashboard/users/page.tsx ``` The `layout` will be applied to: - `/dashboard` - `/dashboard/users` --- ### `not-found.tsx` 404 **for a specific branch** ``` app/blog/not-found.tsx ``` Works only inside `/blog/*` --- ### `loading.tsx` An automatic skeleton / loader Shown **while the segment is loading** --- ## Dynamic routes ### `[id]` ``` app/users/[id]/page.tsx ``` URL: - `/users/1` - `/users/42` ```ts export default function Page({ params }) { return <div>User {params.id}</div> } ``` --- ### `[[...slug]]` - optional catch-all ``` app/docs/[[...slug]]/page.tsx ``` Works for: - `/docs` - `/docs/react` - `/docs/react/hooks` --- ## Route Groups `(group)` **Does not affect the URL**, only organization ``` app/ ├─ (auth)/ │ ├─ login/page.tsx → /login │ └─ register/page.tsx → /register └─ (main)/ └─ page.tsx → / ``` Ideal for: - auth zones - admin / public - logical separation of the project ## Frequent mistakes - Put a component in `app/` → **it became a route** - No `page.tsx` → **there is no route** - Shared components inside `app/` → **extra routes** Keep shared components in `/components`, `/shared`, `/features`, etc.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.