logoNext.js 日本語
ドキュメントブログ学習
はじめに/ガイド/本番環境

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

Next.js アプリケーションをプロダクション環境に移行する前に、最適なユーザー体験、パフォーマンス、セキュリティを実現するために考慮すべき最適化とパターンがいくつかあります。

このページでは、アプリケーション開発時とプロダクション移行前に参照できるベストプラクティス、および認識しておくべきNext.jsの自動最適化を提供します。

自動最適化

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

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

開発時

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

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

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

  • APIルート (API Routes): バックエンドリソースにアクセスするためにルートハンドラーを使用し、クライアントに機密情報が公開されないようにします。
  • データキャッシング (Data Caching): データリクエストがキャッシュされているかどうかを確認し、適切な場合にはキャッシングを選択します。getStaticPropsを使用しないリクエストが適切にキャッシュされるようにします。
  • 増分的静的生成 (Incremental Static Regeneration): サイト全体を再ビルドせずに、ビルド後に静的ページを更新するために増分的静的生成を使用します。
  • 静的画像 (Static Images): 画像などの静的アセットを自動的にキャッシュするためにpublicディレクトリを使用します。

UIとアクセシビリティ

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

セキュリティ

  • 環境変数 (Environment Variables): .env.*ファイルが.gitignoreに追加されていること、および公開可能な変数のみがNEXT_PUBLIC_プレフィックス付きであることを確認します。
  • コンテンツセキュリティポリシー (Content Security Policy): クロスサイトスクリプティング、クリックジャッキング、その他のコードインジェクション攻撃からアプリケーションを保護するために、コンテンツセキュリティポリシーの追加を検討します。

メタデータとSEO

  • <Head> コンポーネント: ページタイトル、説明などを追加するためにnext/headコンポーネントを使用します。

タイプセーフティ

  • TypeScript と TS プラグイン: より良いタイプセーフティと早期エラー検出のためにTypeScriptとTypeScriptプラグインを使用します。

プロダクション移行前

プロダクション移行前に、next buildを実行してアプリケーションをローカルでビルドし、ビルドエラーを捕捉できます。その後、next startを実行してプロダクション環境に近い状態でアプリケーションのパフォーマンスを測定できます。

Core Web Vitals

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

バンドル分析

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

さらに、以下のツールを使用して新しい依存関係を追加した際の影響を理解できます:

プレビューモード

Next.jsには静的生成ページ向けのプレビューモード機能があります。その仕組みについて学びましょう。

リダイレクト

Next.jsでリダイレクトを処理するさまざまな方法について学びましょう。