プロダクション環境チェックリスト

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

このページでは、アプリケーション構築時、本番移行前、デプロイ後に参照できるベストプラクティスと、Next.jsの自動最適化について説明します。

自動最適化

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

コード分割 (Code-splitting): Next.jsはページごとにアプリケーションコードを自動的に分割します。これにより、ナビゲーション時に現在のページに必要なコードのみが読み込まれます。適切な場合にはサードパーティライブラリの遅延読み込み (lazy loading)も検討してください。
プリフェッチ (Prefetching): 新しいルートへのリンクがユーザーのビューポートに入ると、Next.jsはバックグラウンドでそのルートをプリフェッチします。必要に応じてプリフェッチを無効にすることも可能です。
自動静的最適化 (Automatic Static Optimization): ブロッキングデータ要件がないページは静的（事前レンダリング可能）と自動判定されます。最適化されたページはキャッシュ可能で、複数のCDNロケーションからエンドユーザーに配信できます。必要に応じてサーバーサイドレンダリング (Server-side Rendering)を選択することも可能です。

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

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

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

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

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

TypeScriptと TSプラグイン: タイプセーフティを向上させ、エラーを早期に検出するためにTypeScriptとTypeScriptプラグインを使用します。

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

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

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

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

アプリケーションのデプロイ先によっては、アプリケーションのパフォーマンスを監視および改善するための追加ツールや統合機能にアクセスできる場合があります。

Vercelへのデプロイでは、以下を推奨します:

Analytics: ユニークビジター数、ページビュー数などを理解するための組み込み分析ダッシュボード。
Speed Insights: 訪問者データに基づく実世界のパフォーマンスインサイト。
Logging: 本番環境でのデバッグと監視のためのランタイムログとアクティビティログ。または、統合ページでサードパーティツールとサービスのリストを確認できます。

参考:

Vercelでの本番デプロイに関する包括的なベストプラクティスと、ウェブサイトパフォーマンス向上の詳細な戦略については、Vercel本番チェックリストを参照してください。

これらの推奨事項に従うことで、ユーザーにとってより高速で信頼性が高く安全なアプリケーションを構築できます。