Next.js 読解メモ 04: 検索パラメータとURL操作（SSRを避ける）

要点（最短）

• SSRを避けるなら、サーバーで searchParams を読まない。
  クライアントで useSearchParams() を使う。
• URL更新は useRouter().push/replace。履歴を汚したくなければ replace。

最小スニペット：読む

"use client";
import { useSearchParams } from "next/navigation";

export default function View() {
  const sp = useSearchParams();
  const q = sp.get("q") ?? "";
  return <div>query: {q}</div>;
}

最小スニペット：書く（履歴を汚さない）

"use client";
import { usePathname, useRouter, useSearchParams } from "next/navigation";

export default function SearchBox() {
  const router = useRouter();
  const pathname = usePathname();
  const sp = useSearchParams();

  function setQ(q: string) {
    const next = new URLSearchParams(sp);      // 既存クエリを引き継ぐ
    q ? next.set("q", q) : next.delete("q");
    router.replace(`${pathname}?${next.toString()}`, { scroll: false });
  }

  return <input onChange={(e)=>setQ(e.target.value)} placeholder="search..." />;
}

小技

• 入力連打には debounce（例：300ms）。
• 戻る/進むの履歴を残したい検索UI → push、残したくない微細操作 → replace。
• クエリは UI状態の単一ソースにもできる（刷新や共有に強い）。

クイックチェック

• 「サーバーの Page 引数で searchParams を読む」と挙動は？ → SSR になる。

次でラストです（**05: 外部API・秘匿情報・API Route最小プロキシ**）。