Next.jsでwindow is not definedというエラーが発生する場合の対処方法 1. クライアントサイドでのみコードを実行する 2. ダイナミックインポートを使用する 3. useEffectを利用する 4. カスタムフックを使用する 5. サーバーサイドレンダリングを明示的に無…

Next.jsでSSGの挙動をローカル環境で確認する方法 手順 開発モードでの確認 確認ポイント Next.jsでSSGの挙動をローカル環境で確認する方法 Next.jsで静的サイト生成（SSG）の挙動をローカル環境で確認する方法は、以下の手順で行います。 手順 1. プロジェ…

Next.jsでaxiosのinterceptorsの設定処理はクライアントサイドとサーバサイドのどちらで実行されるのか クライアントサイド サーバーサイド 結論 Next.jsでaxiosのinterceptorsの設定処理はクライアントサイドとサーバサイドのどちらで実行されるのか Next.j…

Next.jsで画面のクエリパラメータを取得する方法 1. useRouterフックを使用する方法 手順 実装例 2. getServerSidePropsを使用する方法 手順 実装例 3. getStaticPropsを使用する方法 Next.jsで画面のクエリパラメータを取得する方法 Next.jsで画面のGETパラ…

next exportコマンド 特徴と利点 使用方法 next exportコマンド next exportは、Next.jsで静的サイトを生成するためのコマンドです。 Next.jsは、Reactを基盤としたフレームワークで、静的サイト生成（SSG）やサーバーサイドレンダリング（SSR）などの機能を…

SSGとSSRの違い SSG（Static Site Generation） 特徴 利点 欠点 SSR（Server-Side Rendering） 特徴 利点 欠点 使い分けのポイント 例 SSGで作成されたページには認証機能やAPI呼び出し処理は実装できるのか 認証機能の実装 API呼び出しの実装 まとめ SSGとS…

Next.jsのyarn startコマンドとyarn devコマンド yarn dev yarn start 主な違い yarn buildコマンドを実行する前にyarn startコマンドを実行した場合 対処方法 Next.jsのyarn startコマンドとyarn devコマンド Next.jsのyarn startコマンドとyarn devコマン…

Next.jsで使用するNextPage型とは NextPage型を使用するメリット まとめ Next.jsで使用するNextPage型とは Next.jsでは、ページはReactコンポーネントとして定義され、TypeScriptとあわせて使用する場合は通常NextPage型を使用します。 これにより、Next.js…