Динамическая страница в NextJS

Динамическая страница не кладется в общий статический HTML. Сервер выполняет ее код заново при каждом обращении к маршруту, поэтому на экране могут учитываться текущий адрес и свежие данные из API.

Достаточно прочитать строку запроса через пропс searchParams. После await NextJS собирает страницу на каждый запрос.

Давайте выведем значение поля q из строки запроса и подставим его в адрес fetch:

export default async function SearchPage({ searchParams }) {
	let query = await searchParams;
	let term = query.q || '';
	let url = `https://jsonplaceholder.typicode.com/users?name=${term}`;
	let response = await fetch(url);
	let users = await response.json();
	
	return (
		<div>
			<p>Search: {term || 'all'}</p>
			<ul>
				{users.map(function (user) {
					return <li key={user.id}>{user.name}</li>;
				})}
			</ul>
		</div>
	);
}

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

Выведите над списком подпись с выбранным городом или слово all, если параметр не задан.