logoNext.js 日本語
ドキュメントブログ学習
はじめに/ガイド/プロダクション

Next.js アプリケーションのプロダクション向け最適化方法

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

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

自動最適化

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

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

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

開発時

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

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

補足: 部分事前レンダリング (Partial Prerendering、実験的機能)により、ルート全体を動的レンダリングに切り替えることなく、ルートの一部を動的にすることが可能になります。

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

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

  • メタデータAPI (Metadata API): メタデータAPIを使用して、ページタイトル、説明などを追加し、アプリケーションの検索エンジン最適化(SEO)を向上させます。
  • Open Graph (OG) 画像: ソーシャルシェア用にOG画像を作成します。
  • サイトマップ (Sitemaps) と Robots: サイトマップとrobotsファイルを生成して、検索エンジンがページをクロールおよびインデックスできるようにします。

タイプセーフティ

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

プロダクション移行前

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

Core Web Vitals

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

バンドル分析

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

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

パッケージバンドリング

アプリケーションのサーバーバンドルとクライアントバンドルを最適化する方法を学びます。

PWA

Next.jsを使用してプログレッシブウェブアプリケーション (PWA) を構築する方法を学びましょう。