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

Production Checklist

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

このページでは、アプリケーションのビルド時、本番移行前、デプロイ後に参照できるベストプラクティスと、注意すべき Next.js の自動最適化について説明します。

自動最適化​

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

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

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

開発中​

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

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

Good to know: 部分プリレンダリング (プレビュー) は、ルート全体をダイナミックレンダリングにすることなく、ルートの一部をダイナミックレンダリングにします。

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

  • Server Components: Server Components を使用してサーバー上でデータを取得するメリットを活用します。
  • Route Handlers: Client Components からバックエンドリソースにアクセスするには、Route Handler を使用します。追加のサーバーリクエストを避けるため、Server Components から Route Handler を呼び出さないでください。
  • Streaming: Loading UI と React Suspense を使用して、UI をサーバーからクライアントに徐々に送信し、データの取得中にルート全体がブロックされるのを防ぎます。
  • パラレルなデータフェッチ: パラレルにデータをフェッチすることで、ネットワークのウォーターフォールを減らします。また、必要に応じてデータのプリロードも検討してください。
  • データのキャッシュ: データリクエストがキャッシュされているかどうかを確認し、必要に応じてキャッシュを選択します。フェッチを使用しないリクエストがキャッシュされていることを確認してください。
  • 静的画像: アプリケーションの静的アセット（画像など）を自動的にキャッシュするには、public ディレクトリを使用します。

UI とアクセシビリティ​

  • Server Actionsとミューテーション: Server Actions を使用して、フォーム送信、サーバーサイドの検証、エラーハンドリングを行います。
  • フォントモジュール: フォントモジュールを使用すれば、フォントを最適化できます。フォントファイルを他の静的アセットと一緒に自動的にホストし、外部ネットワークへのリクエストを削除して、レイアウトのずれを軽減します。
  • <Image> コンポーネント: レイアウトのずれを防ぎ、WebP や AVIF のような最新のフォーマットで提供する Image コンポーネントを使用することで画像を自動的に最適化します。
  • <Script> コンポーネント: スクリプトを自動的に遅延させ、メインスレッドをブロックしないようにする Script コンポーネントを使用することでサードパーティのスクリプトを最適化します。
  • ESLint: 組み込みの eslint-plugin-jsx-a11y プラグインを使用して、アクセシビリティの問題を早期に発見してください。

セキュリティ​

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

メタデータと SEO​

  • メタデータ API: メタデータ API を使って、ページのタイトルや説明文などを追加し、アプリケーションの検索エンジン最適化（SEO）を改善しましょう。
  • Open Graph (OG) 画像: OG 画像を作成し、ソーシャル共有用のアプリケーションを準備します。
  • サイトマップとロボッツテキスト: サイトマップとロボッツテキストファイルを生成することで、検索エンジンのクロールとインデックスを支援します。

型安全​

  • TypeScript と TS プラグイン: TypeScript と TypeScript プラグインを使用することで、型安全性が向上し、エラーを早期に発見できるようになります。

本番移行前​

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

Core Web Vitals​

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

バンドルの分析​

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

さらに、以下のツールを使用するとアプリケーションに新しい依存関係を追加した場合の影響を理解することができます:

デプロイ後​

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

Vercel の導入については、以下を推奨します:

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

Good to know:

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

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