Строка запроса на клиенте в NextJS

Параметры после знака '?' в адресной строке на клиенте читают через хук useSearchParams. У возвращаемого объекта есть метод get: им берут значение одного параметра по имени.

Давайте выведем параметр 'search', если он есть в адресе /test?search=project. В файле page.jsx подключим директиву 'use client', импортируем хук и покажем значение в блоке:

'use client';

import { useSearchParams } from 'next/navigation';

export default function TestPage() {
	let searchParams = useSearchParams();
	let search = searchParams.get('search');
	
	return (
		<div>
			{search ? (
				<p>Search query: {search}</p>
			) : (
				<p>No search query.</p>
			)}
		</div>
	);
}

На странице /catalog покажите значение параметра 'q' из адресной строки.