Next.jsで「document is not defined」と怒られたときの対処法

Next.jsを使っていると様々なエラーに遭遇します。その中でも

• document is not defined
• window is not defined

これらのエラーは良く見るので対処方法を解説します。
エラー画面は以下のようなものです。

documentの未定義エラーの対処方法

「document is not defined」の対処方法は2つあります。

1.documentの定義判定

1つ目はグローバル変数にdocumentがあるのかの存在判定です。
documentが定義されている場合のみプログラムを実行するのでif (typeof document !== 'undefined') {}でくくります。今回のプログラムではdocumentオブジェクトを使って、クッキーに値をセットしています。

index.jsx

export default function Index() {
  //document変数が定義されているときのみ
  if (typeof document !== 'undefined') {
    //クッキーに値をセット
    document.cookie = "クッキー";
  }

  return (
    <div style={{textAlign: "center", marginTop: "50px"}}>
      {/* 値の表示 */}
      <h1>値：{typeof document !== 'undefined'?document.cookie:""}</h1>
    </div>
  )
}

2.ブラウザ実行判定

2つ目の方法はブラウザで動いているかの判定です。ブラウザで動いているときのみ、documentを使った処理を実行します。process.browserがtrueの場合はブラウザで動いている証拠です。一方、undefinedの場合はサーバーでの実行になります。

index.jsx

export default function Index() {
  //ブラウザ実行時のみ
  if (process.browser) {
    //クッキーに値をセット
    document.cookie = "クッキー";
  }

  return (
    <div style={{textAlign: "center", marginTop: "50px"}}>
      {/* 値の表示 */}
      <h1>値：{process.browser?document.cookie:""}</h1>
    </div>
  )
}

なぜ「documentが定義されていない！」と怒られるのか？

なぜdocumentやwindowが定義されていないと怒られているのかというと、サーバーサイドでブラウザ用のグローバル変数を使おうとしているためです。

Next.jsはサーバーサイド、クライアントサイド両方で動くフレームワーク。そのため、定義したソースはサーバー、ブラウザ両方の環境で実行されます。

そして、documentやwindowはクライアントだけで定義されているグローバル変数です。サーバー環境で動かそうとすると「そんなグローバル変数は定義されていない！」とエラーが発生します。

なので、if (process.browser)でブラウザのみの判定を入れればサーバー環境での実行時には無視され、クライアント環境だけで動くのです。