Skip to main content

Що таке динамічний маршрут у Next.js?

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

Динамічний маршрут у Next.js - це маршрут, у якому частина URL задається параметром, а не фіксованим значенням.

Простіше:

Один файл → нескінченна кількість URL

Як створюється динамічний маршрут

Використовуються квадратні дужки в імені папки:

txt
app/blog/[slug]/page.tsx

Приклади URL:

  • /blog/next-js
  • /blog/react-ssr
  • /blog/seo-tips

Усі вони обробляються одним і тим самим файлом.

Як отримати значення параметра

У Server Component

ts
export default function Page({ params }) { return <h1>{params.slug}</h1> }

У Client Component

ts
'use client' import { useParams } from 'next/navigation' const params = useParams() // params.slug

Коли використовувати динамічні маршрути

  • статті та блог
  • картки товарів
  • профілі користувачів
  • роадмапи і теми
  • SEO-сторінки за даними

Динамічний маршрут + дані

Типовий патерн:

ts
const post = await getPostBySlug(params.slug) if (!post) notFound()
  • якщо даних немає → коректний 404
  • ідеально для SEO

Зв'язок з рендерингом

Динамічні маршрути можуть працювати з:

  • SSR
  • SSG
  • ISR

Все залежить від того, як ти отримуєш дані.

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

  • плутати [slug] і [[slug]]
  • очікувати маршрут без page.tsx
  • забувати обробляти 404

Короткий висновок для співбесіди

Динамічний маршрут у Next.js - це маршрут з параметрами, які задаються через папки у квадратних дужках, і який дозволяє обробляти безліч URL одним компонентом.

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

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

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

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