Строка запроса в NextJS

После знака ? в адресе страницы идет строка запроса: пары имя=значение, разделенные амперсандом. Например, /users?name=Leanne передает фильтр по имени.

В серверном компоненте страницы строка запроса доступна через пропс searchParams. Это Promise, поэтому его нужно дождаться через await, как и params.

При открытии /users?name=Leanne в query.name попадет переданное значение, и оно окажется в URL fetch. Клиентский хук для чтения адреса здесь не нужен - все происходит на сервере до отправки HTML. Давайте возьмем поле name и добавим его к адресу запроса:

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

Сделайте страницу /shops, которая читает из строки запроса параметр city и подставляет его в адрес API магазинов этого города.

Добавьте второй параметр sort и передайте оба значения в строку запроса к вашему API.