この記事は、4ヶ月前に書かれました。
はじめに
Next14でフロント側入力フォーム作成している時、npm run dev
では問題は無かったがnpm run build
を実行すると以下のエラーが出たので、その対処方法を備忘録として記録。
と表示されビルドエラーとなる。
URLクエリパラメータを取得するためuseSearchParams()
を使用しています。
環境
- Next.js 14.1.4
- React 18.2.0
解決策
詳しくはこちらを読めば原因は分かります。
Missing Suspense boundary with useSearchParams
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 />
</>
)