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

本番環境チェックリスト

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

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

自動最適化

これらのNext.js最適化はデフォルトで有効になっており、構成は必要ありません

  • コード分割：Next.jsは、アプリケーションコードをページごとに自動的にコード分割します。つまり、現在のページに必要なコードのみがナビゲーション時にロードされます。必要に応じて、サードパーティライブラリの遅延ロードも検討できます。
  • プリフェッチ：新しいルートへのリンクがユーザーのビューポートに入ると、Next.jsはバックグラウンドでルートをプリフェッチします。これにより、新しいルートへのナビゲーションがほぼ瞬時に行われます。必要に応じて、プリフェッチをオプトアウトできます。
  • 自動静的最適化：Next.jsは、ページにブロッキングデータ要件がない場合、ページが静的（事前レンダリング可能）であると自動的に判断します。最適化されたページはキャッシュされ、複数のCDNロケーションからエンドユーザーに提供できます。必要に応じてサーバーサイドレンダリングを選択できます。

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

開発中

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

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

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

  • APIルート：ルートハンドラーを使用してバックエンドリソースにアクセスし、機密性の高い秘密がクライアントに公開されないようにします。
  • データキャッシング: データリクエストがキャッシュされているかどうかを確認し、必要に応じてキャッシュを有効にしてください。getStaticProps を使用しないリクエストも、必要に応じてキャッシュされるようにしてください。
  • インクリメンタル静的再生成: インクリメンタル静的再生成を使用して、サイト全体を再構築することなく、静的ページを構築後に更新します。
  • 静的画像: public ディレクトリを使用して、アプリケーションの静的アセット（例：画像）を自動的にキャッシュします。

UIとアクセシビリティ

  • フォントモジュール: フォントモジュールを使用してフォントを最適化します。これにより、フォントファイルが他の静的アセットと一緒に自動的にホストされ、外部ネットワークリクエストが削除され、レイアウトシフト が減少します。
  • <Image> コンポーネント: Image コンポーネントを使用して画像を最適化します。これにより、画像が自動的に最適化され、レイアウトシフトが防止され、WebPやAVIFなどの最新の形式で提供されます。
  • <Script> コンポーネント: Script コンポーネントを使用して、サードパーティスクリプトを最適化します。これにより、スクリプトが自動的に遅延され、メインスレッドをブロックするのを防ぎます。
  • ESLint: ビルトインの eslint-plugin-jsx-a11y プラグインを使用して、アクセシビリティの問題を早期に検出します。

セキュリティ

  • 環境変数: .env.* ファイルが .gitignore に追加されていること、およびパブリック変数が NEXT_PUBLIC_ で始まることを確認してください。
  • コンテンツセキュリティポリシー: クロスサイトスクリプティング、クリックジャッキング、その他のコードインジェクション攻撃などのさまざまなセキュリティ脅威からアプリケーションを保護するために、コンテンツセキュリティポリシーを追加することを検討してください。

メタデータとSEO

  • <Head> コンポーネント: next/head コンポーネントを使用して、ページのタイトル、説明などを追加します。

型安全性

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

本番環境に移行する前に

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

Core Web Vitals

  • Lighthouse: シークレットモードでLighthouseを実行して、ユーザーがサイトをどのように体験するかをよりよく理解し、改善の余地がある領域を特定します。これはシミュレーションテストであり、（Core Web Vitalsなどの）フィールドデータと組み合わせて検討する必要があります。

バンドルの分析

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

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

デプロイ後

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

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

  • Analytics: ユニークビジター数、ページビュー数など、アプリケーションのトラフィックを理解するのに役立つ組み込みの分析ダッシュボード。
  • Speed Insights: 訪問者データに基づいた現実世界のパフォーマンスインサイト。Webサイトが現場でどのようにパフォーマンスを発揮しているかを実際的に見ることができます。
  • ロギング: 問題をデバッグし、本番環境でアプリケーションを監視するのに役立つランタイムログとアクティビティログ。または、サードパーティのツールとサービスのリストについては、統合ページ を参照してください。

知っておくと良いこと

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

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