Menu

本番環境チェックリスト

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を実行して本番環境に近い環境でアプリケーションのパフォーマンスを測定できます。

コアウェブバイタル

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

バンドルの分析

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

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

デプロイ後

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

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

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

補足:

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

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