Динамічні маршрути та динамічні сегменти в Next.js

Що таке Динамічні Маршрути?

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

Основні Динамічні Сегменти

app/
  blog/
    [slug]/
      page.tsx       → /blog/hello-world, /blog/my-post
  users/
    [id]/
      page.tsx       → /users/1, /users/abc

tsx

// app/blog/[slug]/page.tsx
export default async function BlogPost({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const post = await getPost(slug);

  return (
    <article>
      <h1>{post.title}</h1>
      <div>{post.content}</div>
    </article>
  );
}

Сегменти Catch-All

Відповідайте декільком сегментам шляху за допомогою [...param]:

app/
  docs/
    [...slug]/
      page.tsx       → /docs/a, /docs/a/b, /docs/a/b/c

tsx

// app/docs/[...slug]/page.tsx
export default async function Docs({
  params,
}: {
  params: Promise<{ slug: string[] }>;
}) {
  const { slug } = await params;
  // /docs/react/hooks → slug = ["react", "hooks"]

  return <div>Path: {slug.join("/")}</div>;
}

Опціональні Сегменти Catch-All

Відповідайте шляху з сегментами або без за допомогою [[...param]]:

app/
  shop/
    [[...categories]]/
      page.tsx       → /shop, /shop/clothes, /shop/clothes/shirts

tsx

// app/shop/[[...categories]]/page.tsx
export default async function Shop({
  params,
}: {
  params: Promise<{ categories?: string[] }>;
}) {
  const { categories } = await params;
  // /shop             → categories = undefined
  // /shop/clothes     → categories = ["clothes"]
  // /shop/clothes/men → categories = ["clothes", "men"]

  return <ProductGrid categories={categories} />;
}

generateStaticParams

Попередньо рендеріть динамічні маршрути під час збірки:

tsx

// app/blog/[slug]/page.tsx
export async function generateStaticParams() {
  const posts = await getAllPosts();

  return posts.map((post) => ({
    slug: post.slug,
  }));
}
// Генерує: /blog/post-1, /blog/post-2 тощо під час збірки

Кілька Динамічних Сегментів

app/
  [locale]/
    blog/
      [slug]/
        page.tsx     → /en/blog/hello, /ua/blog/hello

tsx

// app/[locale]/blog/[slug]/page.tsx
export default async function BlogPost({
  params,
}: {
  params: Promise<{ locale: string; slug: string }>;
}) {
  const { locale, slug } = await params;
  const post = await getPost(slug, locale);
  return <article>{post.title}</article>;
}

Резюме

Шаблон	Приклад	Відповідає
`[slug]`	`/blog/[slug]`	`/blog/hello` (один сегмент)
`[...slug]`	`/docs/[...slug]`	`/docs/a/b/c` (один або більше)
`[[...slug]]`	`/shop/[[...slug]]`	`/shop`, `/shop/a/b` (нуль або більше)

Важливо:

Динамічні маршрути є основою маршрутизації в Next.js. Використовуйте [param] для одиночних сегментів, [...param] для catch-all, і [[...param]] для опціонального catch-all. Поєднуйте з generateStaticParams для статичної генерації динамічних сторінок.

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

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

Premium

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

Дочитали статтю?

Практика завдань

Динамічні маршрути та динамічні сегменти в Next.js

#Що таке Динамічні Маршрути?

#Основні Динамічні Сегменти

#Сегменти Catch-All

#Опціональні Сегменти Catch-All

#generateStaticParams

#Кілька Динамічних Сегментів

#Резюме