1. サーバーサイド機能の制限
ポイント:
- API Routes、middlewareなどのサーバー機能が使えない
対処方法:
- API Routesの代わりに外部APIサービス（Firebase、Supabase等）を利用する
- ビルド時にデータを取得し、静的ファイルとして生成する
2. クライアントサイドハイドレーションの問題
ポイント:
- 初期表示時にクライアントサイドコンポーネントが正しくレンダリングされないことがある
対処方法:
- コンポーネントの初期化状態を明示的に管理し、初期化完了を監視する
-
useEffectで初期化状態を検出し、状態によって表示を制御する - ライブラリのAPIオブジェクト（例：カルーセルのAPI）が利用可能になったことを確認する
- プリローディングを実装し、アセットを先読みする
3. 画像処理と最適化
ポイント:
- Next.jsの
Imageコンポーネントによる自動最適化が使えない - 画像のロードに関連する問題が発生しやすい
対処方法:
-
next.config.jsでimages: { unoptimized: true }を設定する - ビルド前に画像を事前に最適化しておく（WebP形式等に変換）
- 通常の
imgタグを使い、適切なwidthとheight属性を設定する - 画像のローディング状態を管理し、ロード完了後に表示する処理を実装する
4. データフェッチング
ポイント:
-
getServerSidePropsが使えない - ビルド時にすべてのデータを取得する必要がある
対処方法:
-
getStaticPropsとgetStaticPathsを使用してビルド時にデータをフェッチする - 動的なデータはクライアントサイドで
useEffectやSWR/React Queryを使ってフェッチする - 定期的にビルドを実行し、コンテンツを更新する（CI/CDパイプラインの設定）
- ISRの代わりに、ビルドフックを使って定期的に再ビルドをトリガーする
5. 動的ルーティング
ポイント:
- 動的ルートはビルド時にすべて生成しておく必要がある
- 後から追加されるコンテンツのURLが事前に分からない
対処方法:
-
getStaticPathsで生成するパスを網羅的に指定する -
fallback: falseで存在しないパスへのアクセスを404にする - あるいは
fallback: true/blockingにして、クライアントサイドでデータフェッチする実装を追加 - 新しいコンテンツが追加されたら再ビルドする仕組みを作る
6. 環境変数と設定
ポイント:
- サーバーサイド専用の環境変数が使用できない
- ビルド時の環境と実行時の環境の違いに注意が必要
対処方法:
-
NEXT_PUBLIC_プレフィックスをつけた環境変数のみを使用する - ビルド時に必要な値を
.env.productionなどに定義する - クライアントに公開してはいけない情報は、ビルド時にのみ使用し、出力に含めない
-
next.config.jsでenvオプションを使って環境変数を明示的に定義する
7. クライアントステートの管理
ポイント:
- ページ間でのステート維持が難しくなる
- ハイドレーション不一致エラーが起きやすい
対処方法:
-
localStorageやsessionStorageを使ってステートを保存する - グローバルステート管理ライブラリ（Redux、ZustandなどのContext API）を使う
- ハイドレーション不一致を避けるため、サーバーサイドとクライアントサイドで同じ初期値を使う
-
useEffect内で初期化コードを実行し、SSRではデフォルト値を使用する
8. スタイルとアセット
ポイント:
- CSSモジュールやスタイル読み込みの問題が起きることがある
- アセットパスの指定方法に注意が必要
対処方法:
- スタイルは
classNameを使う（インラインスタイルは避ける） - アセットパスは常に
publicディレクトリからの相対パスで指定する - フォントや大きなアセットは事前に最適化しておく
- Tailwind CSSなどのユーティリティファーストCSSを使うと安全
9. パフォーマンス最適化
ポイント:
- サーバーサイドの最適化がない分、クライアントの負荷が大きくなりがち
- 大規模サイトだとビルド時間が長くなる
対処方法:
- コード分割を活用し、必要なJavaScriptのみロードするようにする
- 重いライブラリは動的インポート（
next/dynamic）を使用する - Lighthouseなどでパフォーマンス測定を行い、最適化する
- ビルドを高速化するため、
next.config.jsでswcMinify: trueを設定する