Next.js の useSearchParams を使ってクエリパラメータを更新する
Published Jan 31, 2025
⋅
Updated Mar 12, 2025
note
Using App Router
Next.js の useSearchParams は、現在の URL の query string を読み取るための Client Component。URLSearchParams インターフェースの read-only version を返す。
useSearchParams から返されるものは read-only なので、search parameter の値を更新したい場合は、 URLSearchParams() コンストラクターに searchParams.toString() を渡す。
そしてインスタンス化した URLSearchParams object の set() や delete() を使って search parameter を更新する。
次の例では、更新された search parameter を toString() で query string とし、 pathname と合わせて replace() に渡している。
'use client';
import { useSearchParams, usePathname, useRouter } from 'next/navigation';
export default function Search() {
const searchParams = useSearchParams();
const pathname = usePathname();
const { replace } = useRouter();
function handleSearch(term: string) {
const params = new URLSearchParams(searchParams);
if (term) {
params.set('query', term);
} else {
params.delete('query');
}
replace(`${pathname}?${params.toString()}`);
}
}参考