Menu

本番環境チェックリスト

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やAVIFなどの最新フォーマットで提供します。
  • <Script>コンポーネント: Scriptコンポーネントを使用してサードパーティスクリプトを最適化し、スクリプトを自動的に遅延させ、メインスレッドをブロックしないようにします。
  • **ESLint： 組み込みのeslint-plugin-jsx-a11yプラグインを使用して、アクセシビリティの問題を早期に発見します。

セキュリティ

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

メタデータとSEO

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

型安全性

  • **TypeScriptとTSプラグイン： より高い型安全性を実現し、早期にエラーを発見するために、TypeScriptとTypeScriptプラグインを使用します。

本番環境に移行する前に

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

コアウェブバイタル

  • **Lighthouse： シークレットモードでLighthouseを実行し、ユーザーがサイトをどのように体験するかをよりよく理解し、改善の余地を特定します。これはシミュレーションテストであり、フィールドデータ（コアウェブバイタルなど）を参照することと組み合わせる必要があります。

バンドルの分析

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

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

デプロイ後

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

Vercelデプロイの場合、次のツールをお勧めします：

  • Analytics: アプリケーションのトラフィックを理解するための組み込みの分析ダッシュボード。ユニークな訪問者数、ページビュー数などを含みます。
  • Speed Insights: 訪問者データに基づいた実世界のパフォーマンス分析。ウェブサイトの実際のフィールドでのパフォーマンスを実践的な視点から提供します。
  • Logging: 本番環境でのアプリケーションの問題デバッグと監視を支援するランタイムおよびアクティビティログ。また、サードパーティのツールやサービスのリストについては、統合ページも参照してください。

補足:

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

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