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

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

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

自動最適化

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

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

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

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

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

フォントモジュール (Font Module): フォントモジュールを使用してフォントを最適化します。これにより、フォントファイルが他の静的アセットと共に自動的にホストされ、外部ネットワークリクエストが削減され、レイアウトシフト (layout shift)が減少します。
<Image> コンポーネント: Imageコンポーネントを使用して画像を最適化します。これにより、画像が自動的に最適化され、レイアウトシフトが防止され、WebPなどの最新フォーマットで配信されます。
<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バンドルのサイズを分析し、アプリケーションパフォーマンスに影響を与える可能性のある大きなモジュールや依存関係を特定します。

さらに、以下のツールを使用して、新しい依存関係をアプリケーションに追加した場合の影響を理解できます: