メインコンテンツまでスキップ

プロダクションチェックリスト

Next.jsアプリケーションを本番環境に投入する前に、最適なユーザーエクスペリエンス、パフォーマンス、およびセキュリティを実現するために考慮すべき最適化とパターンがあります。

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

自動最適化​

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

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

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

開発中​

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

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

Good to know: 部分的プリレンダリング（実験的）は、ルート全体を動的レンダリングにオプトインしなくても、ルートの一部を動的にすることが可能になります。

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

  • Server Components: Server Componentsを使用して、サーバーでデータをフェッチすることの利点を活用します。
  • Route Handlers: Client ComponentsからバックエンドリソースにアクセスするためにRoute Handlersを使用します。ただし、Server ComponentsからRoute Handlersを呼び出してサーバーリクエストを追加しないようにします。
  • ストリーミング: UIとReact Suspenseをロードして、UIをサーバーからクライアントに段階的に送信し、データのフェッチ中にルート全体がブロックされるのを防ぎます。
  • 並行データフェッチ: 適切な場合には並行してデータをフェッチして、ネットワークウォーターフォールを削減します。また、適切な場合にはデータの事前読み込みも検討してください。
  • データキャッシュ: データリクエストがキャッシュされているかどうかを確認し、適切な場合にはキャッシュにオプトインします。fetchを使用しないリクエストがキャッシュされていることを確認します。
  • 静的画像: publicディレクトリを使用して、アプリケーションの静的アセット（例：画像）を自動的にキャッシュします。

UIとアクセシビリティ​

  • フォームとバリデーション: フォーム送信のハンドリング、サーバーサイドバリデーション、およびエラーの処理を行うためにServer Actionsを使用します。
  • Font Module: Font Moduleを使用してフォントを最適化し、フォントファイルを他の静的アセットとともに自動でホストし、外部ネットワークリクエストを削減し、レイアウトシフトを減少させます。
  • <Image>コンポーネント: Image Componentを使用して画像を最適化し、自動的に画像を最適化し、レイアウトシフトを防ぎ、WebPやAVIFといった最新フォーマットで画像を提供します。
  • <Script>コンポーネント: Scriptコンポーネントを使用してサードパーティスクリプトを最適化し、自動でスクリプトを遅延させ、メインスレッドをブロックしないようにします。
  • ESLint: アクセシビリティの問題を早期に発見するために、組み込みのeslint-plugin-jsx-a11yプラグインを使用します。

セキュリティ​

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

メタデータとSEO​

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

型の安全性​

  • TypeScriptとTS Plugin: 型の安全性を高め、エラーを早期に検出するためにTypeScriptとTypeScriptプラグインを使用します。

本番環境に移行する前に​

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

Core Web Vitals​

  • Lighthouse: サイトがどのようにユーザーに体験されるかをよりよく理解し、改善点を特定するために、シークレットモードでLighthouseを実行します。これはシミュレーションされたテストであり、Core Web Vitalsのようなフィールドデータを併用することをお勧めします。

バンドルの分析​

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

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

デプロイ後​

アプリケーションをどこにデプロイするかによって、アプリケーションのパフォーマンスを監視し、改善するための追加ツールや統合機能にアクセスできるかもしれません。

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

  • アナリティクス: アプリケーションのトラフィックを把握するための組み込みの分析ダッシュボードであり、一意の訪問者数、ページビューなどを含みます。
  • スピードインサイト: 訪問者データに基づいた実際のパフォーマンスインサイトを提供し、フィールド内でのWebサイトのパフォーマンスを実践的に把握できます。
  • ロギング: 本番環境でアプリケーションのデバッグを支援するためのランタイムおよびアクティビティログ。代替案として、サードパーティツールとサービスのリストを参照する統合ページもあります。

Good to know:

Vercelでの本番デプロイメントのベストプラクティスの包括的な理解、およびWebサイトのパフォーマンス向上のための詳細な戦略については、Vercel Production Checklistを参照してください。

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