Запрос в серверном компоненте в NextJS

Серверный компонент страницы может быть асинхронной функцией. Тогда внутри нее можно дождаться ответа функции fetch - стандартный способ запроса по HTTP в Node.js и в современных браузерах.

Для примера возьмем открытый тестовый API со списком пользователей по адресу https://jsonplaceholder.typicode.com/users. Ответ приходит в формате JSON - массив объектов с полями name и email.

Сначала выполняется запрос, затем response.json() разбирает тело ответа. После этого в разметке можно пройти по массиву и вывести нужные поля. Давайте откроем файл page.jsx и сделаем страницу со списком имен:

export default async function Users() {
	let response = await fetch('https://jsonplaceholder.typicode.com/users');
	let users = await response.json();
	
	return (
		<ul>
			{users.map(user => (
				<li key={user.id}>{user.name}</li>
			))}
		</ul>
	);
}

Сделайте страницу, которая по адресу /products запрашивает список товаров с вашего тестового API и выводит название каждого товара списком.

Под названием каждого товара покажите его цену отдельной строкой.