Skip to main content

Як структура проекту впливає на роутинг у Next.js?

Next.jsMiddle~1 хв читання
Запропонувати правку

У Next.js роутинг напряму випливає зі структури папок. Простіше кажучи: як розклав файли - так і виглядатимуть URL. Жодних конфігів, жодного ручного мапінгу.

Базове правило

app/ ├─ page.tsx → / ├─ blog/ │ └─ page.tsx → /blog └─ blog/post/ └─ page.tsx → /blog/post

Кожна папка = сегмент URL, а page.tsx - точка входу.

Ключові файли і як вони впливають на роутинг

page.tsx

Створює сторінку

app/profile/page.tsx → /profile

layout.tsx

Обгортка для всіх дочірніх роутів

app/dashboard/layout.tsx app/dashboard/page.tsx app/dashboard/users/page.tsx

layout буде застосований до:

  • /dashboard
  • /dashboard/users

not-found.tsx

404 для конкретної гілки

app/blog/not-found.tsx

Спрацює тільки всередині /blog/*

loading.tsx

Автоматичний skeleton / loader Відображається поки завантажується сегмент

Динамічні маршрути

[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

Працює для:

  • /docs
  • /docs/react
  • /docs/react/hooks

Route Groups (group)

Не впливає на URL, тільки на організацію

app/ ├─ (auth)/ │ ├─ login/page.tsx → /login │ └─ register/page.tsx → /register └─ (main)/ └─ page.tsx → /

Ідеально для:

  • auth-зон
  • admin / public
  • логічного розділення проекту

Часті помилки

  • Поклав компонент у app/ → став роутом
  • Немає page.tsx → роута немає
  • Спільні компоненти всередині app/ → зайві маршрути

Спільні компоненти тримай у /components, /shared, /features тощо

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку