本番環境チェックリスト
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): カスタムエラーページを作成して、本番環境でキャッチオールエラーと404エラーを適切に処理します。
- コンポジションパターン (Composition Patterns): サーバー/クライアントコンポーネントの推奨コンポジションパターンに従い、
"use client"境界の配置を確認して、クライアントサイドJavaScriptバンドルを不必要に増大させないようにします。 - 動的関数 (Dynamic Functions):
cookies()やsearchParamsプロップなどの動的関数は、使用されたルート全体（またはルートレイアウトで使用された場合はアプリケーション全体）を動的レンダリング (Dynamic Rendering)に切り替えます。動的関数の使用が意図的であることを確認し、適切な場合は<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): サーバーアクションを使用してフォーム送信、サーバーサイドバリデーション、エラーハンドリングを行います。
- フォントモジュール (Font Module): フォントモジュールを使用してフォントを最適化します。これにより、フォントファイルが他の静的アセットと共に自動的にホストされ、外部ネットワークリクエストが削減され、レイアウトシフトが軽減されます。
<Image>コンポーネント: Imageコンポーネントを使用して画像を最適化します。これにより、画像が自動的に最適化され、レイアウトシフトが防止され、WebPやAVIFなどの最新フォーマットで配信されます。<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バンドルのサイズを分析し、アプリケーションのパフォーマンスに影響を与える可能性のある大きなモジュールや依存関係を特定します。
さらに、以下のツールを使用して新しい依存関係を追加した際の影響を理解できます:
デプロイ後
アプリケーションのデプロイ先によっては、アプリケーションのパフォーマンスを監視および改善するための追加ツールや統合機能にアクセスできる場合があります。
Vercelへのデプロイでは、以下を推奨します:
- Analytics: ユニークビジター数、ページビュー数などを理解するための組み込み分析ダッシュボード。
- Speed Insights: 訪問者データに基づく実世界のパフォーマンスインサイト。
- Logging: 本番環境でのデバッグと監視のためのランタイムログとアクティビティログ。または、統合ページでサードパーティツールとサービスのリストを確認できます。
参考:
Vercelでの本番デプロイに関する包括的なベストプラクティスと、ウェブサイトパフォーマンス向上の詳細な戦略については、Vercel本番チェックリストを参照してください。
これらの推奨事項に従うことで、ユーザーにとってより高速で信頼性が高く安全なアプリケーションを構築できます。