Next.js：Next.jsのサーバー側またはクライアント側でのみコードを実行します

スタックの片側（フロントエンドまたはバックエンド）でのみ実行されるコードの記述方法

ページコンポーネントでは、サーバー側またはクライアント側でのみコードを実行できますが、windowプロパティ。

このプロパティはブラウザ内にのみ存在するため、確認できます

if (typeof window === 'undefined') {
}

そのブロックにサーバー側のコードを追加します。

同様に、クライアント側のコードを実行するには、チェックするだけです。

if (typeof window !== 'undefined') {
}

JSのヒント：私たちはtypeof他の方法で未定義の値を検出できないため、ここでは演算子を使用します。できませんif (window === undefined)「ウィンドウが定義されていません」ランタイムエラーが発生するため

Next.jsは、ビルド時の最適化として、これらのチェックを使用するコードもバンドルから削除します。クライアント側のバンドルには、にラップされたコンテンツは含まれませんif (typeof window === 'undefined') {}ブロック。

私の無料ダウンロードNext.jsハンドブック