Next.js の検索（useSearchParams）。最小構成サンプル

ここで初めて1つ要る

入出力もログインも一覧と詳細も、Client Component は1つも要りませんでした。検索で初めて1つ必要になります。

必要になる理由は、打つたびに反応させたいからです。送信ボタンを押す形でよければ、ここも素のフォームで足ります。

// Client Component は要らない
<form>
  <input name="q" />
  <button type="submit">探す</button>
</form>

// 入力欄だけが Client Component になる
'use client'
 
export function SearchBox({ value }) {
  const router = useRouter()
  return <input defaultValue={value} onChange={...} />
}

増やすのは葉だけ

実機で確かめました。ビルドしたものを検査すると、元のデータは配信される JavaScript に含まれていません。含まれていたのは、入力欄に書いた placeholder の文字だけでした。境界がそのまま成果物に出ています。

絞り込みはサーバーでやる

入力欄がやっているのは、アドレスを書き換えることだけです。

router.replace(q ? `?q=${encodeURIComponent(q)}` : '?')

絞り込みそのものは、サーバー側のページがやります。

const { q } = await searchParams
const query = String(q ?? '').slice(0, 40)
const found = await searchTerms(query)

実機で確かめました。何も入れなければ 8 件、use で 5 件、server で 2 件、zzz で 0 件になります。元の8件はブラウザへ行っていません。

読むのはサーバーの仕事

useSearchParams を使えば、ブラウザ側でも検索語を読めます。このサンプルでは使っていません。

読むのはサーバーがもう済ませていて、入力欄には切ったあとの値を props で渡しています。ブラウザ側でもう一度アドレスを読むと、切る前の値を使うことになります。

Client Component が要る理由は、読むためではなく書き換えるためです。打つたびにアドレスを変えるのは、ブラウザ側にしかできません。

それでも useSearchParams を使うなら

「Suspense で囲め」と書かれているのを見たことがあるかもしれません。囲めと言われるのは、そのページが静的なままのときです。

ビルド時にページを作ろうとしたとき、検索語はまだ存在しません。そこで手が止まるので、Next.js は待つ場所を要求します。それが Suspense です。

このページのように searchParams を自分で読んでいるページは、その時点でもう動的なので要求されません。実機で確かめました。

囲まずにビルドが落ちる形と、その文言はこの問題にあります。 「とりあえず囲む」ではなく、「そのページが静的か動的か」で決めてください。

ここから足していくとき

• 入力を間引く。いまは1文字ごとにサーバーへ行きます。実務では少し待ってから送ります
• 見つからなかったときの案内。0件のときに何を出すかは、検索の質そのものです
• データベースへ。searchTerms の中を置き換えるだけで、ページ側は変わりません

変える場所はいつも app/data.ts の中か、切り出した葉の部分です。ページを Client Component にする必要は、ここでも出てきません。