Generation)です1。サーバサイドではブラウザ上でのみ実行可能な機能は利用できません。具体例は以下の通りです。上記の中でも特にCookieはコンポーネントの制御などでレンダリング時によく利用される機能です。サーバサイドではCookieを利用できないため、サーバサイドでのレンダリングにCookieによる制御が組み込まれていると意図した結果になりません。今回はNext.jsにおけるCookieの誤った利用例と改善方法について紹介します。検証環境のnextは11.1.2を利用しています。さいごにPre-rendering時にCookieを利用しようとしているダメな例Cookieの有無によってUIを出し分けるケースを考えます。以下のコードは『hideMessageという名前のCookieが存在していなかったらメッセージを表示、存在していたら非表示』という実装の誤った例です。Cookieの操作はjs-cookieで行っています。Home;サーバサイドではCookieが取得できないため、hideMessageという名前のCookieが存在する場合でもサーバサイドではCookieが存在していないと認識されます。Cookieが表示されています。Pre-rendering後に実行されるクライアントサイドのレンダリングではCookieを操作できるため、ブラウザ上の画面にはメッセージが表示されていません。<div>.というReactDOM.hydrate()の警告がReactのアプリケーションログに表示されています。レンダリング結果の不一致はパフォーマンス低下やデザイン崩れの原因となるため改善が必要です。Next.jsのSSRの流れについては【図解】Next.jsのSSRが画面反映されるまでの具体的な流れ、ReactDOM.hydrate()については【Next.js】Hydration時にReact.hydrate()による警告が発生するケースとその解決方法で紹介していますので、あわせてご覧になってください。Cookieによる制御をPre-renderingのページで実装する方法Cookieの有無によって表示するUIを出し分けるのであれば、例えば副作用を活用すると解決できます。UIを出し分けるフラグをStateに追加し、副作用でCookieの有無に応じてフラグの真偽値を変更させます。副作用はマウント後に実行されるので、副作用ではCookieの操作ができます。具体例は以下の通りです。importを活用する方法もあります。リロードと画面遷移でページのUIに違いがあった時は要注意Next.jsのルータ機能を利用するとCSRによる画面遷移となります。Next.jsのルータ機能にはnext/linkとnext/routerがあります。リロードで画面を表示する場合はPre-rendering(SSR/SG)となります。リロードと画面遷移でページのUI、特に初期表示に違いがあった場合は今回のようにサーバサイドでCookieをはじめとしたブラウザの機能を使おうとしている可能性が高いので覚えておくとよいです。next/linkの流れの詳細は【Next.js】next/linkの画面遷移(CSR)から画面反映までの流れの図解解説で解説しています。さいごにTwitter(@nishina555)やってます。↩RECOMMENDJavaScriptNext.jsReactツイートシェアはてブ送るPocketプロフィールnishina大企業、ベンチャーと色々なところでWebエンジニアやっています。退職手続きから案件参画まで。人気の記事iPhoneの連絡先の保存がうまくできない!?原因は同期設定かも。