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

Покращити цю статтю

Допрацюйте відповідь до «Що таке динамічний маршрут у Next.js?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**Динамічний маршрут у 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 одним компонентом.**

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати225 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.