Menu

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

Next.jsアプリケーションを本番環境に移行する前に、最適なユーザーエクスペリエンス、パフォーマンス、セキュリティを実現するために実装を検討すべき最適化とパターンがあります。

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

自動最適化

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

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

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

開発中

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

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

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

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

UIとアクセシビリティ

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

セキュリティ

  • 環境変数: .env.*ファイルが.gitignoreに追加され、公開変数のみがNEXT_PUBLIC_プレフィックスを付けていることを確認してください。
  • コンテンツセキュリティポリシー: クロスサイトスクリプティング、クリックジャッキング、その他のコード注入攻撃などのさまざまなセキュリティ脅威からアプリケーションを守るために、コンテンツセキュリティポリシーの追加を検討してください。

メタデータとSEO

型安全性

  • TypeScriptとTSプラグイン: TypeScriptとTypeScriptプラグインを使用して、より優れた型安全性を確保し、エラーを早期に発見できるようにします。

本番環境に移行する前に

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

Core Web Vitals

  • Lighthouse: シークレットモードでLighthouseを実行し、ユーザーがサイトをどのように体験するかをよく理解し、改善すべき領域を特定します。これはシミュレーションテストであり、実際のデータ（Core Web Vitalsなど）と併せて確認する必要があります。

バンドルの分析

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

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