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

Next.js アプリケーションを本番環境向けに最適化する方法

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 と Client Components を静的にレンダリングし、レンダリング結果をキャッシュしてアプリケーションのパフォーマンスを向上させます。特定のルートに対しては、適切な場合に動的レンダリングを選択できます。
  • キャッシング: Next.js はデータリクエスト、Server と Client Components のレンダリング結果、静的アセットなどをキャッシュし、サーバー、データベース、バックエンドサービスへのネットワークリクエストの数を減らします。適切な場合には、キャッシングをオプトアウトすることもできます。

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

開発中​

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

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

Good to know: 部分的事前レンダリング（実験的）により、ルートの一部を動的にしながら、ルート全体を動的レンダリングにオプトインさせないことが可能になります。

データ取得とキャッシング​

  • Server Components: Server Components を使用してサーバー上でデータを取得する利点を活用します。
  • ルートハンドラー: ルートハンドラーを使用して、Client Components からバックエンドリソースにアクセスします。ただし、Server Components からルートハンドラーを呼び出して追加のサーバーリクエストを避けることはしないでください。
  • ストリーミング: Loading UI と React Suspense を使用して、サーバーからクライアントに UI を段階的に送信し、データが取得されている間にルート全体がブロックされるのを防ぎます。
  • 並列データ取得: 適切な場合には、データを並列に取得してネットワークウォーターフォールを減らします。また、適切な場合にはデータの事前読み込みも検討してください。
  • データキャッシング: データリクエストがキャッシュされているかどうかを確認し、適切な場合にはキャッシングを選択します。fetch を使用しないリクエストがキャッシュされていることを確認します。
  • 静的画像: public ディレクトリを使用して、アプリケーションの静的アセット（例：画像）を自動的にキャッシュします。

UI とアクセシビリティ​

  • フォームとバリデーション: Server Actions を使用してフォームの送信、サーバーサイドバリデーション、およびエラーハンドリングを行います。
  • フォントモジュール: フォントモジュールを使用してフォントを最適化し、フォントファイルを他の静的アセットと共に自動的にホストし、外部ネットワークリクエストを削減し、レイアウトシフトを減少させます。
  • <Image> コンポーネント: Image コンポーネントを使用して画像を最適化し、レイアウトシフトを防ぎ、WebP などの最新フォーマットで提供します。
  • <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 を実行して本番環境に近い環境でアプリケーションのパフォーマンスを測定できます。

Core Web Vitals​

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

バンドルの分析​

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

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

デプロイ後​

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

Vercel へのデプロイの場合、次のことをお勧めします：

  • Analytics: アプリケーションのトラフィックを理解するための組み込みの分析ダッシュボードで、ユニークビジター数、ページビュー数などを含みます。
  • Speed Insights: 訪問者データに基づく実際のパフォーマンスインサイトで、フィールドでのウェブサイトのパフォーマンスを実用的に把握できます。
  • [ログ]((https://vercel.com/docs/observability/runtime-logs?utm_source=next-site&utm_campaign=nextjs-docs&utm_medium=docs): ランタイムおよびアクティビティログを使用して、問題をデバッグし、本番環境でアプリケーションを監視します。代わりに、サードパーティツールやサービスのリストについては統合ページを参照してください。

Good to know:

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

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