Next.js の useSearchParams を使ってクエリパラメータを更新する

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()}`);
  }
}

参考

Functions: useSearchParams | Next.js