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

本番環境チェックリスト

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

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

自動最適化

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

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

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

開発中

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

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

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

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

UIとアクセシビリティ

  • フォントモジュール: フォントモジュールを使用してフォントを最適化します。これにより、フォントファイルが他の静的アセットとともに自動的にホストされ、外部ネットワークリクエストが削除され、レイアウトシフトが削減されます。
  • <Image>コンポーネント: Imageコンポーネントを使用して画像を最適化します。これにより、画像が自動的に最適化され、レイアウトシフトが防止され、WebPのような最新の形式で提供されます。
  • <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デプロイの場合、以下をお勧めします。

  • アナリティクス: ユニーク訪問者数、ページビュー数など、アプリケーションのトラフィックを理解するのに役立つビルトインのアナリティクスダッシュボード。
  • スピードインサイト: 訪問者データに基づいた実際のパフォーマンスインサイトで、ウェブサイトの現場でのパフォーマンスを実用的な視点から提供します。
  • ロギング: 本番環境での問題のデバッグとアプリケーションの監視に役立つランタイムおよびアクティビティログ。または、サードパーティツールとサービスの一覧については、統合ページを参照してください。

豆知識

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

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