Next.js の「ウィンドウが定義されていません」エラーを修正する方法?

Next.js React アプリでウィンドウが定義されていません: 包括的な解決策

Next.js アプリケーションでは、エラー「」が発生する場合があります。グローバル「ウィンドウ」オブジェクトにアクセスしようとすると、「ウィンドウが定義されていません」というメッセージが表示されます。これは、ウィンドウ オブジェクトがクライアント側のレンダリング中にのみ使用できるために発生する可能性があります。この問題を解決する方法は次のとおりです:

「window」オブジェクトを使用するには、「window」が定義されているかどうかをチェックする「if」ステートメントでコードを囲むことができます:

if (typeof window !== "undefined") {
  // Client-side-only code
  console.log('window.innerHeight', window.innerHeight);
}

このアプローチにより、「if」ブロック内のコードは「window」オブジェクトが存在するクライアント側でのみ実行されることが保証されます。

「process.browser」経由で「window」にアクセスするという提案は、Webpack5 と Next.js の両方で非推奨になったため、推奨されなくなりました。 「プロセス」オブジェクトは主にサーバー側のレンダリングに使用され、クライアント側の操作に使用することは適切ではありません。

したがって、推奨される解決策は、前に「ウィンドウ」オブジェクトの存在を確認することです。それにアクセスしています。これにより、コードがクライアント側とサーバー側のレンダリング環境間で移植可能になります。

以上がNext.js の「ウィンドウが定義されていません」エラーを修正する方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。