コンテンツへスキップ
アプリケーションの構築デプロイ本番環境チェックリスト

本番環境チェックリスト

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

このページでは、アプリケーションの構築中、本番環境に移行する前、デプロイ後に参照できるベストプラクティスと、認識しておくべきNext.jsの自動最適化について説明します。

自動最適化

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

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

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

開発中

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

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

補足：部分プリレンダリング（実験的）を使用すると、ルート全体を動的レンダリングに切り替えることなく、ルートの一部を動的にすることができます。

データフェッチとキャッシング

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

UIとアクセシビリティ

  • フォームとバリデーション： サーバーアクションを使用して、フォーム送信、サーバーサイドバリデーション、エラー処理を行います。
  • フォントモジュール： フォントモジュールを使用することで、フォントファイルを他の静的アセットと共にホストし、外部ネットワークリクエストを削除し、レイアウトシフトを削減できます。
  • <Image>コンポーネント： 画像コンポーネントを使用することで、画像を自動的に最適化し、レイアウトシフトを防ぎ、WebPやAVIFなどの最新の形式で提供できます。
  • <Script>コンポーネント： スクリプトコンポーネントを使用することで、サードパーティースクリプトを自動的に遅延ロードし、メインスレッドのブロックを防ぎます。
  • ESLint： 組み込みのeslint-plugin-jsx-a11yプラグインを使用して、アクセシビリティの問題を早期に検出します。

セキュリティ

  • 汚染： データオブジェクトや特定の値を汚染することで、機密データがクライアントに公開されるのを防ぎます。
  • サーバーアクション： ユーザーがサーバーアクションを呼び出す権限を持っていることを確認してください。推奨されるセキュリティ対策を確認してください。
  • 環境変数： .env.*ファイルは.gitignoreに追加し、公開変数のみをNEXT_PUBLIC_でプレフィックスしてください。
  • コンテンツセキュリティポリシー： クロスサイトスクリプティング、クリックジャッキング、その他のコードインジェクション攻撃などの様々なセキュリティ脅威からアプリケーションを保護するために、コンテンツセキュリティポリシーを追加することを検討してください。

メタデータとSEO

  • メタデータAPI： ページタイトル、説明などを追加することで、アプリケーションの検索エンジン最適化（SEO）を向上させるためにメタデータAPIを使用してください。
  • Open Graph (OG) 画像： ソーシャルシェアリングに対応するために、OG画像を作成してください。
  • サイトマップとrobots.txt： サイトマップとrobots.txtを生成することで、検索エンジンがページをクロールしてインデックス付けできるようにします。

型安全性

  • TypeScriptとTSプラグイン： より良い型安全性を確保し、エラーを早期に検出するために、TypeScriptとTypeScriptプラグインを使用してください。

本番環境に移行する前に

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

Core Web Vitals

  • Lighthouse： シークレットモードでLighthouseを実行して、ユーザーがサイトをどのように体験するのか、そして改善すべき点を特定します。これはシミュレートされたテストであり、フィールドデータ（Core Web Vitalsなど）を確認することと併せて行う必要があります。

バンドルの分析

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

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

デプロイ後

アプリケーションをデプロイする場所によっては、アプリケーションのパフォーマンスを監視および改善するのに役立つ追加のツールや統合機能を利用できる場合があります。

Vercelへのデプロイの場合は、以下をお勧めします。

  • 分析： 一意の訪問者数、ページビュー数など、アプリケーションのトラフィックを理解するのに役立つ組み込みの分析ダッシュボード。
  • スピードインサイト: 訪問者データに基づいた現実世界の性能インサイトを提供し、ウェブサイトの現場でのパフォーマンスを実際的に把握できます。
  • ロギング: ランタイムログとアクティビティログを使用して、問題のデバッグと本番環境でのアプリケーションの監視を行います。または、インテグレーションページでサードパーティーツールとサービスのリストを確認してください。

知っておくと良いこと

Vercelでの本番環境へのデプロイに関するベストプラクティス（ウェブサイトのパフォーマンス向上のための詳細な戦略を含む）を包括的に理解するには、Vercel本番環境チェックリストを参照してください。

これらの推奨事項に従うことで、ユーザーにとってより高速で信頼性が高く、安全なアプリケーションを構築できます。