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

本番環境チェックリスト

Next.jsアプリケーションを本番環境にデプロイする前に、最高のユーザー体験、パフォーマンス、セキュリティのために考慮すべき最適化とパターンがあります。

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

自動最適化

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

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

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

開発中

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

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

参考情報: 部分的なプリレンダリング（実験的）により、ルート全体を動的レンダリングにオプトインさせることなく、ルートの一部を動的にすることができます。

データフェッチとキャッシュ

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

UIとアクセシビリティ

  • フォームとバリデーション: サーバーアクションを使用して、フォーム送信、サーバーサイドのバリデーション、エラー処理を行います。
  • フォントモジュール: フォントモジュールを使用してフォントを最適化します。これにより、フォントファイルは他の静的アセットとともに自動的にホストされ、外部ネットワークリクエストが削除され、レイアウトシフトが削減されます。
  • <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バンドルのサイズを分析し、アプリケーションのパフォーマンスに影響を与える可能性のある大きなモジュールや依存関係を特定します。

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

デプロイ後

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

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

  • Analytics: ユニークビジター数、ページビュー数など、アプリケーションのトラフィックを把握するのに役立つ組み込みのアナリティクスダッシュボード。
  • Speed Insights: 訪問者データに基づいた実世界のパフォーマンス分析情報で、ウェブサイトが現場でどのように機能しているかについて実用的な視点を提供します。
  • Logging: ランタイムログとアクティビティログは、本番環境での問題のデバッグとアプリケーションの監視に役立ちます。または、サードパーティのツールとサービスのリストについては、インテグレーションページを参照してください。

参考情報

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

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