How does project structure affect routing in Next.js?

Next.jsMiddle~1 min read

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.

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

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.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.