コンテンツにスキップ
Pages Routerガイド本番環境

Next.js アプリケーションを本番環境用に最適化する方法

Next.js アプリケーションを本番環境に移行する前に、最高のユーザーエクスペリエンス、パフォーマンス、セキュリティを実現するために検討すべき最適化とパターンがいくつかあります。

このページでは、アプリケーションの 開発時 および 本番環境へ移行する前 の参考として使用できるベストプラクティスと、認識しておくべき Next.js の自動最適化 について説明します。

自動最適化

これらの Next.js 最適化はデフォルトで有効になっており、設定は不要です。

  • コード分割: Next.js はアプリケーションコードをページごとに自動的にコード分割します。これは、現在のページに必要なコードのみがナビゲーション時に読み込まれることを意味します。必要に応じて、サードパーティライブラリの 遅延読み込み も検討できます。
  • プリフェッチ: 新しいルートへのリンクがユーザーのビューポートに入ると、Next.js はバックグラウンドでルートをプリフェッチします。これにより、新しいルートへのナビゲーションがほぼ瞬時に行われます。必要に応じてプリフェッチをオプトアウトできます。
  • 自動静的最適化: ブロッキングデータ要件がない場合、Next.js はページが静的（事前レンダリング可能）であることを自動的に判断します。最適化されたページはキャッシュされ、複数の CDN ロケーションからエンドユーザーに配信できます。必要に応じて サーバーサイドレンダリング をオプトインできます。

これらのデフォルト設定は、アプリケーションのパフォーマンスを向上させ、各ネットワークリクエストで転送されるデータ量とコストを削減することを目的としています。

開発中

アプリケーションを構築する際は、最高のパフォーマンスとユーザーエクスペリエンスを確保するために、以下の機能を使用することをお勧めします。

ルーティングとレンダリング

データ取得とキャッシング

  • API ルート: Route Handlers を使用してバックエンドリソースにアクセスし、機密性の高いシークレットがクライアントに公開されるのを防ぎます。
  • データキャッシング: データリクエストがキャッシュされているかどうかを確認し、必要に応じてキャッシュをオプトインしてください。getStaticProps を使用しないリクエストが適切にキャッシュされていることを確認してください。
  • インクリメンタル静的再生成: インクリメンタル静的再生成を使用して、サイト全体を再構築することなく、ビルド済みの静的ページを更新できます。
  • 静的画像: public ディレクトリを使用して、アプリケーションの静的アセット（例: 画像）を自動的にキャッシュします。

UIとアクセシビリティ

  • Font Module: Font Module を使用してフォントを最適化します。これにより、フォントファイルが他の静的アセットと共にホストされ、外部ネットワークリクエストが削除され、レイアウトシフト が削減されます。
  • <Image> コンポーネント: Image Component を使用して画像を最適化します。これにより、画像が自動的に最適化され、レイアウトシフトが防止され、WebP のような最新の形式で配信されます。
  • <Script> コンポーネント: Script Component を使用してサードパーティスクリプトを最適化します。これにより、スクリプトが自動的に遅延され、メインスレッドをブロックするのを防ぎます。
  • ESLint: ビルトインの eslint-plugin-jsx-a11y プラグインを使用して、アクセシビリティの問題を早期に検出してください。

セキュリティ

  • 環境変数: .env.* ファイルが .gitignore に追加されており、公開可能な変数のみが NEXT_PUBLIC_ でプレフィックスされていることを確認してください。
  • コンテンツセキュリティポリシー: クロスサイトスクリプティング、クリックジャッキング、その他のコードインジェクション攻撃などのさまざまなセキュリティ脅威からアプリケーションを保護するために、コンテンツセキュリティポリシーを追加することを検討してください。

メタデータとSEO

型安全性

  • TypeScript と TS Plugin: TypeScript と TypeScript プラグインを使用して、型安全性を向上させ、エラーを早期に検出できるようにします。

本番環境へ移行する前に

本番環境へ移行する前に、next build を実行してローカルでアプリケーションをビルドし、ビルドエラーを検出してから、next start を実行して本番環境に近い環境でアプリケーションのパフォーマンスを測定できます。

Core Web Vitals

  • Lighthouse: シークレットモードで Lighthouse を実行して、ユーザーがサイトをどのように体験するかをより深く理解し、改善点を見つけてください。これはシミュレーションテストであり、フィールドデータ（Core Web Vitals など）の確認と併用する必要があります。

バンドルの分析

@next/bundle-analyzer プラグイン を使用して、JavaScript バンドルのサイズを分析し、アプリケーションのパフォーマンスに影響を与える可能性のある大きなモジュールや依存関係を特定してください。

さらに、以下のツールは、アプリケーションに新しい依存関係を追加した際の影響を理解するのに役立ちます。