Пошук уроків, статей та іншого контенту
Згенеруйте параметри динамічних сегментів наперед за допомогою generateStaticParams.
generateStaticParamsgenerateStaticParams використовується в динамічних сегментах App Router, щоб Next.js заздалегідь знав, які значення параметрів потрібно згенерувати як статичні сторінки.
Наприклад, для маршруту:
app/products/[slug]/page.tsxзначення slug є динамічним параметром. Функція generateStaticParams може повідомити Next.js, що під час збирання потрібно створити сторінки для таких товарів:
/products/keyboard
/products/mouse
/products/monitorФункція повинна повертати масив об’єктів. Ключі об’єктів мають відповідати назвам динамічних сегментів маршруту.
[
{ slug: "keyboard" },
{ slug: "mouse" },
{ slug: "monitor" }
]Структура файлів:
app/
└── products/
└── [slug]/
└── page.tsxФайл app/products/[slug]/page.tsx:
type Product = {
slug: string;
name: string;
price: number;
};
const products: Product[] = [
{
slug: "keyboard",
name: "Механічна клавіатура",
price: 3200,
},
{
slug: "mouse",
name: "Бездротова миша",
price: 1400,
},
{
slug: "monitor",
name: "4K монітор",
price: 12500,
},
];
export function generateStaticParams() {
return products.map((product) => ({
slug: product.slug,
}));
}
export default async function ProductPage({
params,
}: {
params: Promise<{ slug: string }>;
}) {
const { slug } = await params;
const product = products.find((item) => item.slug === slug);
if (!product) {
return <h1>Товар не знайдено</h1>;
}
return (
<main>
<h1>{product.name}</h1>
<p>Ціна: {product.price} грн</p>
</main>
);
}Під час збирання Next.js викличе generateStaticParams і отримає:
[
{ slug: "keyboard" },
{ slug: "mouse" },
{ slug: "monitor" }
]У результаті ці сторінки будуть підготовлені заздалегідь.
У сучасних версіях Next.js значення
paramsу серверному компоненті є промісом, тому його потрібно очікувати черезawait.
На практиці параметри часто завантажуються з API або бази даних.
type Post = {
slug: string;
};
export async function generateStaticParams() {
const response = await fetch("https://example.com/api/posts");
const posts: Post[] = await response.json();
return posts.map((post) => ({
slug: post.slug,
}));
}
export default async function PostPage({
params,
}: {
params: Promise<{ slug: string }>;
}) {
const { slug } = await params;
const response = await fetch(`https://example.com/api/posts/${slug}`);
const post = await response.json();
return (
<article>
<h1>{post.title}</h1>
<p>{post.content}</p>
</article>
);
}Тут:
generateStaticParams отримує список публікацій.
Для кожної публікації створюється об’єкт із параметром slug.
Next.js генерує сторінку для кожного отриманого slug.
Компонент сторінки використовує цей slug, щоб завантажити відповідні дані.
У реальному проєкті URL API та формат відповіді мають відповідати вашому серверу.
Функція також працює з маршрутами, що містять кілька динамічних сегментів.
Наприклад:
app/
└── products/
└── [category]/
└── [slug]/
└── page.tsxДля URL:
/products/laptops/ultrabookпараметри будуть такими:
{
category: "laptops",
slug: "ultrabook"
}Відповідна функція:
export function generateStaticParams() {
return [
{
category: "laptops",
slug: "ultrabook",
},
{
category: "phones",
slug: "smartphone-x",
},
];
}
export default async function ProductPage({
params,
}: {
params: Promise<{
category: string;
slug: string;
}>;
}) {
const { category, slug } = await params;
return (
<main>
<p>Категорія: {category}</p>
<h1>Товар: {slug}</h1>
</main>
);
}Назви властивостей у повернених об’єктах повинні точно збігатися з назвами динамічних сегментів:
[category] → category
[slug] → slugЗа замовчуванням generateStaticParams визначає параметри, які потрібно підготувати наперед. Якщо користувач відкриє інше значення параметра, Next.js може обробити цей маршрут динамічно.
Наприклад, якщо функція повертає лише:
[
{ slug: "keyboard" },
{ slug: "mouse" }
]то сторінка /products/monitor не належить до списку попередньо згенерованих параметрів.
Щоб дозволити лише параметри зі списку та повертати помилку для інших значень, використовуйте dynamicParams = false:
type ProductPageProps = {
params: Promise<{ slug: string }>;
};
export const dynamicParams = false;
export function generateStaticParams() {
return [
{ slug: "keyboard" },
{ slug: "mouse" },
];
}
export default async function ProductPage({
params,
}: ProductPageProps) {
const { slug } = await params;
return (
<main>
<h1>Товар: {slug}</h1>
</main>
);
}У такому випадку сторінка для /products/monitor, якщо її немає в результаті generateStaticParams, буде недоступною та отримає відповідь 404.
Це зручно, коли набір сторінок є фіксованим і потрібно заборонити будь-які інші значення.
generateStaticParams виконується під час next build, щоб Next.js міг підготувати відомі сторінки.
Тому не варто розраховувати, що функція автоматично виконається під час кожного запиту користувача.
Правильний результат:
export function generateStaticParams() {
return [
{ slug: "first-post" },
{ slug: "second-post" },
];
}Неправильний результат:
export function generateStaticParams() {
return {
slug: "first-post",
};
}Потрібно повертати масив, навіть якщо параметр лише один:
export function generateStaticParams() {
return [{ slug: "first-post" }];
}Для маршруту:
app/orders/[id]/page.tsxпотрібно повертати:
export function generateStaticParams() {
return [
{ id: "1" },
{ id: "2" },
];
}Навіть якщо ідентифікатори у вашій базі даних є числами, параметри URL спочатку представлені як рядки. За потреби їх можна перетворити:
const { id } = await params;
const numericId = Number(id);Для маршруту:
app/blog/[slug]/page.tsxпотрібно повертати об’єкти з ключем slug:
export function generateStaticParams() {
return [{ slug: "nextjs-basics" }];
}Ключ id не відповідатиме сегменту [slug]:
export function generateStaticParams() {
return [{ id: "nextjs-basics" }];
}Не потрібно викликати generateStaticParams у компоненті сторінки:
const params = generateStaticParams();Next.js викликає цю функцію самостійно під час процесу збирання.
Функція повинна повертати значення сегмента, а не повний шлях:
export function generateStaticParams() {
return [{ slug: "nextjs-basics" }];
}Не потрібно повертати:
export function generateStaticParams() {
return [{ slug: "/blog/nextjs-basics" }];
}paramsЯкщо маршрут має сегмент [slug], тип параметрів повинен містити slug:
type Props = {
params: Promise<{ slug: string }>;
};Для кількох сегментів потрібно описати їх усі:
type Props = {
params: Promise<{
category: string;
slug: string;
}>;
};generateStaticParams визначає параметри динамічних маршрутів, які потрібно підготувати заздалегідь.
Функція повертає масив об’єктів.
Ключі об’єктів повинні відповідати назвам динамічних сегментів.
Для маршруту [slug] використовується формат { slug: "значення" }.
Функція виконується під час збирання застосунку.
dynamicParams = false забороняє маршрути з параметрами, яких немає у списку.
У сучасних версіях Next.js params потрібно отримувати через await.