Заголовок запроса в NextJS

Помимо адреса, fetch принимает второй аргумент - объект с настройками. В нем можно задать метод, тело запроса и заголовки - пары имя и значение, которые сервер API использует для проверки доступа или выбора формата ответа.

Защищенные API часто ждут заголовок Authorization с токеном доступа. Значение Bearer demo-token в учебном примере условное: на jsonplaceholder оно не проверяется, но в вашем проекте так обычно передают ключ, выданный бэкендом. Заголовки уходят только с сервера - пользователь не видит их в исходнике страницы в браузере. Давайте добавим заголовок к запросу списка пользователей:

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

Запросите каталог книг с API, которое требует заголовок X-Api-Key, и выведите названия книг списком.

Добавьте к тому же запросу заголовок Accept со значением application/json и убедитесь, что ответ по-прежнему разбирается через json().