Данные динамического роута в NextJS

Часто нужна не вся коллекция, а одна запись: карточка пользователя, статья, заказ. Адрес страницы задает id, а данные подставляются в запрос к API.

Структура папок для роута /users/5 может выглядеть так:

/src/
- /app/
  - /users/
    - /[id]/
      - page.jsx

Значение id из URL попадает в шаблонную строку адреса fetch. В ответ приходит один объект, а не массив. Давайте прочитаем параметр id и запросим одного пользователя:

export default async function User({ 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>
	);
}

Сделайте роут /city/:slug, который по slug запрашивает описание города с API и выводит его название и краткий текст.

Сделайте страницу /posts/:num, где num - номер поста. Запросите пост по этому номеру и покажите заголовок и тело поста.