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

備忘録として

経緯

Next14でフロント側入力フォーム作成。
URLクエリパラメータを取得するためuseSearchParams()を使用。
npm run dev では問題は無かったがnpm run buildを実行すると、

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

と表示されビルドエラーとなる。

環境

• Next.js 14.1.4
• React 18.2.0

解決策

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

useSearchParamsを使用する際はでラップしてねってことですね。

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

page.js

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

～～中略～～

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