【Next.js】useSearchParamsの使い方

概要

useSearchParamsは、URLSearchParamsインターフェースの読み取り専用バージョンを返します。これにより、URLのクエリパラメータを取得できます。ただし、useSearchParamsはサーバーコンポーネントではサポートされていないため、クライアントサイドでのみ使用可能です。

使用方法

以下は、useSearchParamsを使用してURLのクエリパラメータを取得する例です。

'use client'

import { useSearchParams } from 'next/navigation'

export default function SearchBar() {
  const searchParams = useSearchParams()

  const search = searchParams.get('search')

  // URL -> `/dashboard?search=my-project`
  // `search` -> 'my-project'
  return <>Search: {search}</>
}

クエリパラメータの取得

useSearchParamsは、以下のメソッドを提供しています：

• get(): 指定したクエリパラメータの最初の値を返します
• has(): 指定したクエリパラメータが存在するかどうかを返します

その他、getAll(), keys(), values(), entries(), forEach(), toString()などがあります

'use client'

import { useSearchParams } from 'next/navigation'

export default function SearchBar() {
  const searchParams = useSearchParams()

  const search = searchParams.get('search')
  const hasSearch = searchParams.has('search')

  console.log(search)       // クライアントサイドでのログ
  console.log(hasSearch)   // クエリパラメータの存在確認

  return (
    <>
      Search: {search}
      {hasSearch ? ' - 検索結果あり' : ' - 検索結果なし'}
    </>
  )
}

静的レンダリング時の挙動

静的にレンダリングされたルートでuseSearchParamsを呼び出すと、最も近いSuspenseまでのクライアントコンポーネントツリーがクライアントサイドでレンダリングされます。これにより、静的にレンダリングされた部分と動的にレンダリングされた部分を組み合わせることができます。

import { Suspense } from 'react'
import SearchBar from './search-bar'

// フォールバックとして使用されるコンポーネント
function SearchBarFallback() {
  return <>placeholder</>
}

export default function Page() {
  return (
    <>
      <nav>
        <Suspense fallback={<SearchBarFallback />}>
          <SearchBar />
        </Suspense>
      </nav>
      <h1>Dashboard</h1>
    </>
  )
}

上記の例では、SearchBarコンポーネントがSuspense境界でラップされており、初期HTMLではSearchBarFallbackが表示されます。Reactのハイドレーション中に値が利用可能になると、SearchBarコンポーネントに置き換わります。

動的レンダリング時の挙動

動的にレンダリングされたルートでは、useSearchParamsがサーバーサイドの初期レンダー時に利用可能になります。

import SearchBar from './search-bar'

export const dynamic = 'force-dynamic'

export default function Page() {
  return (
    <>
      <nav>
        <SearchBar />
      </nav>
      <h1>Dashboard</h1>
    </>
  )
}