[解決済み] Next.js の React アプリでウィンドウが定義されていない

質問

私の 次へ.js アプリにアクセスできないようです window :

未処理の拒絶反応 (ReferenceError): window が定義されていません。

componentWillMount() {
    console.log('window.innerHeight', window.innerHeight);
}

解決方法は？

からコードを移動します。 componentWillMount() から componentDidMount() :

componentDidMount() {
  console.log('window.innerHeight', window.innerHeight);
}

Next.jsで。 componentDidMount() が実行されるクライアントのみで window といったブラウザ固有のAPIが利用できるようになります。から Next.js wiki :

Next.jsはユニバーサルなので、まずサーバーサイドでコードが実行されます。 次にクライアントサイドです。windowオブジェクトはクライアントサイドにしか存在しないので、もし Reactコンポーネントでどうしてもアクセスする必要がある場合は は、そのコードをcomponentDidMountに置く必要があります。このライフサイクルメソッドは はクライアント上でのみ実行されます。また 代替となるユニバーサルライブラリはないのでしょうか？

同じ路線で。 componentWillMount() になります。 非推奨 は、Reactのv17では、非常に近い将来、事実上、使用するのが安全でなくなる可能性があります。