【Next.js】cookie関数を使用するときは、動的レンダリングを明示しないとエラーが起きることがある話
勉強のためにユーザー機能があるToDoListをNext.jsを使用して作成した。
ローカルでは問題なく動作していたが、vercelにデプロイを施す際に、エラーが生じた。
サーバーコンポーネントでNext.jsのcookie関数を使用しているにも関わらず、静的なレンダリングが実行されてしまったことが原因だった。
以下、原因と対応を備忘録として残す。
ローカルでは問題なく動作していたが、vercelにデプロイを施す際に、エラーが生じた。
サーバーコンポーネントでNext.jsのcookie関数を使用しているにも関わらず、静的なレンダリングが実行されてしまったことが原因だった。
以下、原因と対応を備忘録として残す。
開発環境 | バージョン |
---|---|
Next.js | 15.2.1 |
TypeScript | 5.0.0 |
エラーの内容
デプロイをしたら以下のようなエラーが表示された
Error: Dynamic server usage: Route /dashboard couldn't be rendered statically
because it used `cookies`. See more info here:
https://nextjs.org/docs/messages/dynamic-server-error
Next.jsは、アプリケーションのパフォーマンスを向上させるため、可能な限り静的レンダリングを実行し、ページの内容を事前にキャッシュする仕組みを持っている。
そのため、サーバーサイドコンポーネントでは、デフォルトで、静的レンダリングが実行されるようだ。
しかし、今回使用したcookie関数はリクエストごとに異なるデータを取得するため、動的な処理を必要とする。
Next.js は通常、このようなケースでは 自動的に動的レンダリング (Dynamic
Rendering)
に切り替えるらしいが、動的なレンダリングが必要であることを明示しないと今回のようなエラーになることがあるらしい。
対応
以下の一文をエラーが発生したpageコンポーネントに追記した
export const dynamic = "force-dynamic";
公式ドキュメントによるとこの一行を追加することで静的レンダリングではなく、動的レンダリングをするように命じさせることができるとのこと。
実際この一文を追加したところ問題なくデプロイが完了した。