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

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

Next.jsアプリケーションをプロダクションに導入する前に、最適なユーザーエクスペリエンス、パフォーマンス、安全性を実現するためのいくつかの最適化やパターンを考慮すべきです。

このページでは、アプリケーションをビルドするとき、プロダクションに進む前、およびデプロイ後に参考にできるベストプラクティスと、知っておくべきNext.jsの自動最適化を紹介します。

自動最適化​

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

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

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

開発中に​

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

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

知っておくと良い情報: 部分プリレンダリング（実験的）は、ルートの一部を動的にすることを可能にし、ルート全体を動的レンダリングにオプトインすることなく行うことができます。

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

  • Server Component: Server Componentsを使用してデータをサーバー上でフェッチするメリットを活用します。
  • ルートハンドラー: Client Componentからバックエンドのリソースにアクセスするためにルートハンドラーを使用します。ただし、追加のサーバーリクエストを避けるため、Server Componentsからルートハンドラーを呼び出さないでください。
  • ストリーミング: サーバーからクライアントにUIを逐次送信するためにローディングUIとReact Suspenseを使用し、データがフェッチされる間、ルート全体がブロックされるのを防ぎます。
  • 並列データフェッチ: 必要に応じてデータを並列にフェッチすることでネットワークウォーターフォールを縮小します。また、必要に応じてデータをプリロードすることを検討してください。
  • データキャッシング: データリクエストがキャッシュされているかどうかを確認し、必要に応じてキャッシングを選択します。fetchを使用しないリクエストがキャッシュされることを確認し、キャッシュされることを確認してください。
  • 静的画像: publicディレクトリを使用して、アプリケーションの静的アセット（例：画像）を自動的にキャッシュします。

UIとアクセシビリティ​

  • フォントモジュール: フォントモジュールを使用してフォントを最適化し、フォントファイルを他の静的アセットと共に自動的にホスティングし、外部ネットワークリクエストを削減し、レイアウトシフトを減らします。
  • <Image>コンポーネント: Imageコンポーネントを使用して画像を最適化し、自動的に画像を最適化し、レイアウトシフトを防ぎ、WebPやAVIFなどの現代のフォーマットで画像を提供します。
  • <Script>コンポーネント: Scriptコンポーネントを使用してサードパーティスクリプトを最適化し、スクリプトを自動的に遅延させ、メインスレッドをブロックしないようにします。
  • ESLint: 組み込みのeslint-plugin-jsx-a11yプラグインを使用して、アクセシビリティの問題を早期に発見します。

セキュリティ​

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

メタデータとSEO​

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

型安全性​

  • TypeScriptとTSプラグイン: TypeScriptとTypeScriptプラグインを使用して、型安全性を向上させ、エラーを早期に発見するのに役立てます。

プロダクションに進む前に​

プロダクションに進む前に、next buildを実行してアプリケーションをローカルでビルドし、ビルドエラーをキャッチした後、next startを実行してプロダクションに似た環境でアプリケーションのパフォーマンスを測定できます。

コアWeb指標​

  • Lighthouse: インコグニートでLighthouseを実行して、ユーザーがサイトをどのように体験するかをより良く理解し、改善のための領域を特定します。これはシミュレーションされたテストであり、コアWeb指標などのフィールドデータの検討と組み合わせる必要があります。

バンドルの分析​

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

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

デプロイ後​

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

Vercelデプロイメントでは、以下をお勧めします：

  • 分析ツール: ユニークビジター数、ページビューなど、アプリケーションのトラフィックを理解するのに役立つ組み込みの分析ダッシュボード。
  • スピードインサイト: 訪問者データに基づく実世界のパフォーマンスインサイトを提供し、フィールド内でのWebサイトの実際のパフォーマンスを把握するのに役立つツール。
  • ログ: プロダクションでアプリケーションをデバッグし、監視するためのランタイムおよびアクティビティログ。もしくは、統合ページを参照してサードパーティのツールやサービスのリストを確認する。

知っておくと良い情報:

Vercelでのプロダクションデプロイメントのベストプラクティスを包括的に理解するには、Webサイトのパフォーマンス向上のための詳細な戦略を含むVercelプロダクションチェックリストを参照してください。

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