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はデータリクエスト、サーバーコンポーネントとクライアントコンポーネントのレンダリング結果、静的アセットなどをキャッシュし、サーバー、データベース、バックエンドサービスへのネットワークリクエスト数を減らします。適切な場合にはキャッシングをオプトアウトできます。
これらのデフォルト設定は、アプリケーションのパフォーマンスを向上させ、各ネットワークリクエストで転送されるデータの量とコストを削減することを目的としています。
開発時
アプリケーション構築時には、以下の機能を使用して最適なパフォーマンスとユーザー体験を確保することを推奨します:
ルーティングとレンダリング
- レイアウト (Layouts): レイアウトを使用してページ間でUIを共有し、ナビゲーション時の部分レンダリング (partial rendering)を有効にします。
<Link>コンポーネント: クライアントサイドナビゲーションとプリフェッチには<Link>コンポーネントを使用します。- エラーハンドリング (Error Handling): カスタムエラーページを作成して、本番環境でキャッチオールエラー (catch-all errors)と404エラーを適切に処理します。
- クライアントとサーバーコンポーネント (Client and Server Components): サーバーコンポーネントとクライアントコンポーネントの推奨構成パターンに従い、
"use client"境界の配置を確認して、クライアント側JavaScriptバンドルを不必要に増加させないようにします。 - 動的API (Dynamic APIs):
cookiesやsearchParamsプロップなどの動的APIは、使用したルート全体（またはルートレイアウトで使用した場合はアプリケーション全体）を動的レンダリング (Dynamic Rendering)に移行させることに注意してください。動的APIの使用が意図的であることを確認し、適切な場合は<Suspense>境界でラップします。
補足: 部分事前レンダリング (Partial Prerendering)（実験的機能）を使用すると、ルート全体を動的レンダリングに移行させずに、ルートの一部を動的にすることができます。
データ取得とキャッシング
- サーバーコンポーネント (Server Components): サーバーコンポーネントを使用してサーバー上でデータを取得する利点を活用します。
- ルートハンドラー (Route Handlers): クライアントコンポーネントからバックエンドリソースにアクセスするためにルートハンドラーを使用します。ただし、追加のサーバーリクエストを避けるため、サーバーコンポーネントからルートハンドラーを呼び出さないでください。
- ストリーミング (Streaming): ローディングUIとReact Suspenseを使用して、サーバーからクライアントへUIを段階的に送信し、データ取得中にルート全体がブロックされないようにします。
- 並列データ取得 (Parallel Data Fetching): 適切な場合にはデータを並列に取得してネットワークウォーターフォールを減らします。また、適切な場合にはデータのプリロード (preloading data)も検討します。
- データキャッシング (Data Caching): データリクエストがキャッシュされているかどうかを確認し、適切な場合にはキャッシングを選択します。
fetchを使用しないリクエストがキャッシュされるようにします。 - 静的画像 (Static Images): アプリケーションの静的アセット（例: 画像）を自動的にキャッシュするために
publicディレクトリを使用します。
UIとアクセシビリティ
- フォームとバリデーション (Forms and Validation): サーバーアクション (Server Actions) を使用してフォーム送信を処理し、サーバーサイドバリデーションとエラーハンドリングを行います。
- フォントモジュール (Font Module): フォントモジュールを使用してフォントを最適化します。これにより、フォントファイルが他の静的アセットと共に自動的にホストされ、外部ネットワークリクエストが削減され、レイアウトシフト (layout shift)が減少します。
<Image>コンポーネント: Imageコンポーネントを使用して画像を最適化します。これにより、画像が自動的に最適化され、レイアウトシフトが防止され、WebPなどの最新フォーマットで配信されます。<Script>コンポーネント: Scriptコンポーネントを使用してサードパーティスクリプトを最適化します。これにより、スクリプトが自動的に遅延され、メインスレッドのブロックが防止されます。- ESLint: 組み込みの
eslint-plugin-jsx-a11yプラグインを使用して、アクセシビリティの問題を早期に検出します。
セキュリティ
- テイント (Tainting): データオブジェクトや特定の値をテイントして、機密データがクライアントに公開されないようにします。
- サーバーアクション (Server Actions): ユーザーがサーバーアクションを呼び出す権限があることを確認します。推奨されるセキュリティプラクティスを確認してください。
- 環境変数 (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など）と組み合わせて確認する必要があります。
useReportWebVitalsフック: このフックを使用してCore Web Vitalsデータを分析ツールに送信します。
バンドル分析
@next/bundle-analyzerプラグインを使用して、JavaScriptバンドルのサイズを分析し、アプリケーションパフォーマンスに影響を与える可能性のある大きなモジュールや依存関係を特定します。
さらに、以下のツールを使用して、新しい依存関係をアプリケーションに追加した場合の影響を理解できます: