Next.js SSGビルドサイトで遷移の検知方法とエラーの回避策

Next.js で SSG (静的サイト生成) を使用する際、クライアントサイドでのページ遷移や URL のクエリパラメータの変更を検知するために、useSearchParams や usePathname フックを使うことができます。ただし、これらのフックはクライアントサイド専用であるため、SSGやSSRのコンテキストでは注意が必要です。以下では、ページ遷移やクエリパラメータ変更の検知方法と、エラーを回避するための実装について簡潔にまとめます。

クライアントサイドでのページ遷移とパラメータの検知
1. 説明:
2. エラー回避
1. エラー回避の方法
参考ドキュメント

クライアントサイドでのページ遷移とパラメータの検知

Next.js の useSearchParams と usePathname を利用して、クエリパラメータやページ遷移を検知できます。これらのフックはクライアントサイドでのみ動作するため、"use client"; を宣言した上で使用します。

"use client";
import React, { useEffect } from "react";
import { useSearchParams, usePathname } from "next/navigation";
import { Suspense } from "react";

const HeaderCore = () => {
  const searchParams = useSearchParams();
  const pathname = usePathname();

  useEffect(() => {
    console.log("パスまたはクエリパラメータの更新を検知:", {
      searchParams: searchParams.toString(),
      pathname: pathname,
    });
  }, [searchParams, pathname]);

  return <div>Header</div>;
};

const Header = () => {
  return (
    <Suspense>
      <HeaderCore />
    </Suspense>
  );
};

export default Header;

説明:

useSearchParams: クエリパラメータの変化を検知します。
usePathname: ページのパスの変化を監視します。
Suspense: クライアントサイドでのレンダリングを待機させる際に使用。これを利用して、静的ビルド時のエラーを回避します。

2. エラー回避

SSG ビルド中に useSearchParams を使用すると、Next.js は「useSearchParams() should be wrapped in a Suspense boundary at page…」というエラーを表示します。これは、クライアントサイド専用のフックが SSG で誤って使用された場合に発生します。

エラー回避の方法

Suspense の利用: クライアントサイド専用の部分を Suspense でラップし、ビルド時にサーバーサイドレンダリングされないようにします。これにより、ビルド中のエラーを回避できます。
useEffect を使ったクライアントサイドのみの実行: クエリパラメータやパスの監視はクライアントサイドで行われるべき処理なので、useEffect 内で監視処理を行います。