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

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

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

このページでは、アプリケーションの構築時や本番移行前の参照として使用できるベストプラクティス、および注意すべきNext.jsの自動最適化について説明します。

自動最適化

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

  • サーバーコンポーネント：Next.jsはデフォルトでサーバーコンポーネントを使用します。サーバーコンポーネントはサーバーで実行され、クライアントでのレンダリングにJavaScriptを必要としません。そのため、クライアントサイドJavaScriptバンドルのサイズには影響しません。インタラクティブ性が必要な場合は、必要に応じてクライアントコンポーネントを使用できます。
  • コード分割：サーバーコンポーネントは、ルートセグメントによる自動コード分割を有効にします。必要に応じて、クライアントコンポーネントやサードパーティライブラリの遅延読み込みを検討することもできます。
  • プリフェッチ：新しいルートへのリンクがユーザーのビューポートに入ると、Next.jsはバックグラウンドでルートをプリフェッチします。これにより、新しいルートへのナビゲーションがほぼ瞬時に行われます。必要に応じて、プリフェッチをオプトアウトできます。
  • 静的レンダリング：Next.jsは、サーバーコンポーネントとクライアントコンポーネントをビルド時にサーバーで静的にレンダリングし、レンダリング結果をキャッシュしてアプリケーションのパフォーマンスを向上させます。必要に応じて、特定のルートに対して動的レンダリングをオプトインできます。
  • キャッシュ：Next.jsは、データリクエスト、サーバーコンポーネントおよびクライアントコンポーネントのレンダリング結果、静的アセットなどをキャッシュし、サーバー、データベース、バックエンドサービスへのネットワークリクエスト数を減らします。必要に応じて、キャッシュをオプトアウトできます。

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

開発中

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

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

豆知識：部分プリレンダリング（実験的）により、ルート全体を動的レンダリングにオプトインすることなく、ルートの一部を動的にすることができます。

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

  • サーバーコンポーネント：サーバーコンポーネントを使用してサーバーでデータを取得する利点を活用します。
  • ルートハンドラ：クライアントコンポーネントからバックエンドリソースにアクセスするためにルートハンドラを使用します。ただし、追加のサーバーリクエストを避けるため、サーバーコンポーネントからルートハンドラを呼び出さないでください。
  • ストリーミング：ローディングUIとReact Suspenseを使用して、UIをサーバーからクライアントに段階的に送信し、データ取得中にルート全体がブロックされるのを防ぎます。
  • 並列データ取得：可能であれば、データを並列に取得してネットワークウォーターフォールを削減します。また、可能であればデータのプリローディングを検討してください。
  • データキャッシング：データリクエストがキャッシュされているかどうかを確認し、必要に応じてキャッシングをオプトインします。fetchを使用しないリクエストがキャッシュされていることを確認してください。
  • 静的画像：publicディレクトリを使用して、アプリケーションの静的アセット（画像など）を自動的にキャッシュします。

UIとアクセシビリティ

  • フォームと検証：サーバーアクションを使用して、フォーム送信、サーバーサイド検証、エラー処理を行います。
  • グローバルエラーUI：app/global-error.tsxを追加して、アプリ全体で未キャッチのエラーに対する一貫性のあるアクセシブルなフォールバックUIとリカバリを提供します。
  • グローバル404：app/global-not-found.tsxを追加して、アプリ全体で一致しないルートに対するアクセシブルな404を提供します。
  • フォントモジュール：フォントモジュールを使用してフォントを最適化します。これにより、フォントファイルが他の静的アセットと共にホストされ、外部ネットワークリクエストが削除され、レイアウトシフトが削減されます。
  • <Image>コンポーネント：Imageコンポーネントを使用して画像を最適化します。これにより、画像が自動的に最適化され、レイアウトシフトが防止され、WebPなどの最新形式で提供されます。
  • <Script>コンポーネント：Scriptコンポーネントを使用してサードパーティスクリプトを最適化します。これにより、スクリプトが自動的に遅延され、メインスレッドをブロックするのを防ぎます。
  • ESLint：組み込みのeslint-plugin-jsx-a11yプラグインを使用して、アクセシビリティの問題を早期に検出します。

セキュリティ

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

メタデータとSEO

  • メタデータAPI：メタデータAPIを使用して、ページタイトル、説明などを追加することで、アプリケーションの検索エンジン最適化（SEO）を改善します。
  • Open Graph（OG）画像：OG画像を作成して、ソーシャル共有のためにアプリケーションを準備します。
  • サイトマップおよびrobots：サイトマップとrobotsファイルを生成して、検索エンジンがページをクロールおよびインデックスできるようにします。

型安全性

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

本番環境に移行する前

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

Core Web Vitals

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

バンドルの分析

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

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