Неудачный запрос в NextJS

Запрос может завершиться без данных: неверный адрес, сервер вернул код 404 или 500. Объект Response при этом все равно создается, и ошибку нужно проверить явно.

Свойство response.ok равно true только для успешных кодов (диапазон 200-299). Чтобы увидеть ветку с ошибкой, подставьте в fetch заведомо неверный путь, например адрес с лишним сегментом. После проверки верните рабочий URL. Давайте проверим ответ и покажем текст ошибки на странице:

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

Сделайте страницу заказов: при неудачном ответе API выведите сообщение orders are unavailable, при успехе - список номеров заказов.

Для карточки одного товара по id покажите product not found, если сервер вернул код 404.