Menu

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

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

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

自動最適化

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

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

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

開発中

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

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

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

  • API Routes: Route Handlersを使用してバックエンドリソースにアクセスし、機密シークレットがクライアント側に露出することを防ぎます。
  • Data Caching: データリクエストがキャッシュされているかどうかを確認し、必要に応じてキャッシングをオプトインします。getStaticPropsを使用しないリクエストが必要に応じてキャッシュされていることを確認してください。
  • Incremental Static Regeneration: Incremental Static Regenerationを使用して、サイト全体を再ビルドすることなく、ビルド後に静的ページを更新します。
  • Static Images: publicディレクトリを使用してアプリケーションの静的アセット（画像など）を自動的にキャッシュします。

UIとアクセシビリティ

  • Font Module: Font Moduleを使用してフォントを最適化します。これは自動的にフォントファイルを他の静的アセットと共にホストし、外部ネットワークリクエストを削除し、layout shiftを削減します。
  • <Image> Component: Image Componentを使用して画像を最適化します。これは自動的に画像を最適化し、layout shiftを防止し、WebPなどの最新フォーマットで提供します。
  • <Script> Component: Script Componentを使用してサードパーティスクリプトを最適化します。これは自動的にスクリプトを遅延させ、メインスレッドのブロッキングを防ぎます。
  • ESLint: 組み込みのeslint-plugin-jsx-a11yプラグインを使用してアクセシビリティの問題を早期に検出します。

セキュリティ

  • Environment Variables: .env.*ファイルが.gitignoreに追加されており、公開変数のみがNEXT_PUBLIC_でプレフィックスされていることを確認してください。
  • Content Security Policy: クロスサイトスクリプティング、クリックジャッキング、その他のコードインジェクション攻撃などの様々なセキュリティ脅威からアプリケーションを保護するためにContent Security Policyの追加を検討してください。

メタデータとSEO

  • <Head> Component: next/headコンポーネントを使用してページタイトル、説明などを追加します。

型安全性

  • TypeScriptとTS Plugin: TypeScriptとTypeScript pluginを使用して、より良い型安全性を確保し、エラーを早期に検出します。

本番環境への移行前

本番環境への移行前に、next buildを実行してアプリケーションをローカルでビルドしビルドエラーを検出してから、next startを実行して本番環境に近い環境でアプリケーションのパフォーマンスを計測することができます。

Core Web Vitals

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

バンドルの分析

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

さらに、以下のツールはアプリケーションへの新しい依存関係の追加の影響を理解するのに役立ちます：