【Next.js14】npm run build で useSearchParams() should be wrapped in a suspense boundary at page “~~~”.のビルドエラーとなる

Javascript
この記事は約2分で読めます。

この記事は、4ヶ月前に書かれました。

はじめに

Next14でフロント側入力フォーム作成している時、npm run dev では問題は無かったがnpm run buildを実行すると以下のエラーが出たので、その対処方法を備忘録として記録。

useSearchParams() should be wrapped in a suspense boundary at page “＊＊＊＊”.

と表示されビルドエラーとなる。
URLクエリパラメータを取得するためuseSearchParams()を使用しています。

環境

  • Next.js 14.1.4
  • React 18.2.0

解決策

詳しくはこちらを読めば原因は分かります。

Missing Suspense boundary with useSearchParams
nextjs.org

useSearchParamsを使用する際は<Suspense>でラップしてねってことですね。
しかし、useSearchParamsを使用しているのはMyFromコンポーネント内なのですが、そちらにSuspenseでラップしてもエラーが解消しなかったっため、親コンポーネント側にSuspenseのラップを追加したらビルドエラーが解消しました。

import MyFrom from "./components/form";
import { Suspense } from "react"; //追加

～～中略～～

    return (
    <>
      <CommonJs />
      <GoogleTagManager gtmId="******" />
        <section className="Contact">
            <h2>入力フォーム</h2>
            //Suspenseでラップ
            <Suspense>
                <MyFrom/>
            </Suspense>
        </section> 
      <Footer />
	  </>
    )