Параметры для сборки в NextJS

Маршрут с папкой [id] по умолчанию может собираться при первом заходе на конкретный адрес. Если заранее известен набор идентификаторов, их можно передать через функцию generateStaticParams - тогда HTML для этих значений появится уже на этапе сборки.

Функция возвращает массив объектов с полями сегментов. Для одного id каждый элемент выглядит как { id: '1' }. Остальные значения по-прежнему могут собираться при обращении, если это не запрещено другими настройками.

Давайте подготовим две карточки пользователя и выведем имя после await params:

export async function generateStaticParams() {
	return [
		{ id: '1' },
		{ id: '2' },
	];
}

export default async function UserPage({ params }) {
	let { id } = await params;
	let response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
	let user = await response.json();
	
	return (
		<div>
			<h1>{user.name}</h1>
			<p>{user.email}</p>
		</div>
	);
}

Задайте три идентификатора товаров для предварительной сборки страницы /products/[id].

Выведите название и цену товара из ответа вашего API по выбранному идентификатору.