本番環境チェックリスト
Next.jsアプリケーションを本番環境に移行する前に、最高のユーザーエクスペリエンス、パフォーマンス、およびセキュリティを確保するために考慮すべき最適化とパターンがあります。
このページでは、アプリケーションを構築する際、本番環境に移行する前、およびデプロイ後に参照できるベストプラクティスと、知っておくべきNext.jsの自動最適化を提供します。
自動最適化
これらのNext.jsの最適化はデフォルトで有効になっており、設定は不要です:
- Server Components: Next.jsはデフォルトでServer Componentsを使用します。Server Componentsはサーバー上で実行され、クライアントでのレンダリングにJavaScriptを必要としません。そのため、クライアント側のJavaScriptバンドルのサイズに影響を与えません。必要に応じて、インタラクティブ性のためにClient Componentsを使用できます。
- コード分割: Server Componentsはルートセグメントごとに自動的にコード分割を可能にします。適切な場合には、遅延読み込みを使用してClient Componentsやサードパーティライブラリを読み込むことも検討してください。
- プリフェッチ: 新しいルートへのリンクがユーザーのビューポートに入ると、Next.jsはバックグラウンドでそのルートをプリフェッチします。これにより、新しいルートへのナビゲーションがほぼ瞬時に行われます。適切な場合には、プリフェッチをオプトアウトすることもできます。
- 静的レンダリング: Next.jsはビルド時にサーバー上でServerおよびClient Componentsを静的にレンダリングし、レンダリングされた結果をキャッシュしてアプリケーションのパフォーマンスを向上させます。適切な場合には、特定のルートに対して動的レンダリングをオプトインすることもできます。
- キャッシング: Next.jsはデータリクエスト、ServerおよびClient Componentsのレンダリング結果、静的アセットなどをキャッシュし、サーバー、データベース、およびバックエンドサービスへのネットワークリクエストの数を減らします。適切な場合には、キャッシングをオプトアウトすることもできます。
これらのデフォルト設定は、アプリケーションのパフォーマンスを向上させ、各ネットワークリクエストで転送されるデータのコストと量を削減することを目的としています。
開発中
アプリケーションを構築する際には、最高のパフォーマンスとユーザーエクスペリエンスを確保するために、次の機能を使用することをお勧めします:
ルーティングとレンダリング
- レイアウト: レイアウトを使用してページ間でUIを共有し、ナビゲーション時に部分レンダリングを有効にします。
<Link>
コンポーネント:<Link>
コンポーネントを使用して、クライアントサイドのナビゲーションとプリフェッチを行います。- エラーハンドリング: カスタムエラーページを作成して、本番環境でキャッチオールエラーや404エラーを優雅に処理します。
- コンポジションパターン: ServerおよびClient Componentsの推奨されるコンポジションパターンに従い、
"use client"
境界の配置を確認して、クライアント側のJavaScriptバンドルを不必要に増やさないようにします。 - 動的API:
cookies
やsearchParams
propのような動的APIは、ルート全体を動的レンダリングにオプトインすることに注意してください(Root レイアウトで使用される場合はアプリケーション全体)。動的APIの使用が意図的であることを確認し、適切な場合には<Suspense>
境界でラップします。
Good to know: 部分的事前レンダリング(実験的)により、ルート全体を動的レンダリングにオプトインせずに、ルートの一部を動的にすることができます。
データフェッチとキャッシング
- Server Components: Server Componentsを使用して、サーバー上でデータをフェッチする利点を活用します。
- Route Handlers: Route Handlersを使用して、Client Componentsからバックエンドリソースにアクセスします。ただし、Server ComponentsからRoute Handlersを呼び出して追加のサーバーリクエストを避けてください。
- ストリーミング: Loading UIとReact Suspenseを使用して、サーバーからクライアントにUIを段階的に送信し、データがフェッチされている間にルート全体がブロックされるのを防ぎます。
- 並列データフェッチ: 適切な場合には、データを並列にフェッチしてネットワークウォーターフォールを減らします。また、適切な場合にはデータの事前読み込みを検討してください。
- データキャッシング: データリクエストがキャッシュされているかどうかを確認し、適切な場合にはキャッシングをオプトインします。
fetch
を使用しないリクエストがキャッシュされていることを確認してください。 - 静的画像:
public
ディレクトリを使用して、アプリケーションの静的アセット(例:画像)を自動的にキャッシュします。
UIとアクセシビリティ
- フォームとバリデーション: Server Actionsを使用してフォームの送信、サーバーサイドバリデーション、およびエラーハンドリングを行います。
- フォントモジュール: フォントモジュールを使用してフォントを最適化し、フォントファイルを他の静的アセットと共に自動的にホストし、外部ネットワークリクエストを削減し、レイアウトシフトを減少させます。
<Image>
コンポーネント: Imageコンポーネントを使用して画像を最適化し、画像を自動的に最適化し、レイアウトシフトを防ぎ、WebPのような最新の形式で提供します。<Script>
コンポーネント: Scriptコンポーネントを使用してサードパーティスクリプトを最適化し、スクリプトを自動的に遅延させ、メインスレッドをブロックしないようにします。- ESLint: 組み込みの
eslint-plugin-jsx-a11y
プラグインを使用して、アクセシビリティの問題を早期にキャッチします。
セキュリティ
- 汚染: データオブジェクトや特定の値を汚染することで、クライアントに機密データが露出しないようにします。
- Server Actions: ユーザーがServer Actionsを呼び出す権限を持っていることを確認します。推奨されるセキュリティプラクティスを確認してください。
- 環境変数:
.env.*
ファイルが.gitignore
に追加されていることを確認し、公開変数のみがNEXT_PUBLIC_
でプレフィックスされていることを確認します。 - コンテンツセキュリティポリシー: クロスサイトスクリプティング、クリックジャッキング、その他のコードインジェクション攻撃など、さまざまなセキュリティ脅威からアプリケーションを保護するために、コンテンツセキュリティポリシーを追加することを検討してください。
メタデータとSEO
- メタデータAPI: メタデータAPIを使用して、ページタイトル、説明などを追加することで、アプリケーションの検索エンジン最適化(SEO)を向上させます。
- Open Graph(OG)画像: アプリケーションをソーシャルシェアリングに備えるためにOG画像を作成します。
- サイトマップおよびロボット: サイトマップとロボットファイルを生成して、検索エンジンがページをクロールおよびインデックスするのを支援します。
型安全性
- TypeScriptとTSプラグイン: TypeScriptとTypeScriptプラグインを使用して、型安全性を向上させ、エラーを早期にキャッチするのに役立てます。
本番環境に移行する前
本番環境に移行する前に、next build
を実行してアプリケーションをローカルでビルドし、ビルドエラーをキャッチし、その後next start
を実行して本番環境に近い環境でアプリケーションのパフォーマンスを測定します。
コアウェブバイタル
- Lighthouse: インコグニートでLighthouseを実行して、ユーザーがサイトをどのように体験するかをよりよく理解し、改善の余地を特定します。これはシミュレートされたテストであり、コアウェブバイタルなどのフィールドデータを確認することと組み合わせて行うべきです。
useReportWebVitals
フック: このフックを使用して、コアウェブバイタルデータを分析ツールに送信します。
バンドルの分析
@next/bundle-analyzer
プラグインを使用して、JavaScriptバンドルのサイズを分析し、アプリケーションのパフォーマンスに影響を与える可能性のある大きなモジュールや依存関係を特定します。
さらに、次のツールは、アプリケーションに新しい依存関係を追加する影響を理解するのに役立ちます:
デプロイ後
アプリケーションをどこにデプロイするかによって、アプリケーションのパフォーマンスを監視および改善するための追加のツールや統合にアクセスできる場合があります。
Vercelへのデプロイの場合、次のことをお勧めします:
- Analytics: アプリケーションのトラフィックを理解するのに役立つ組み込みの分析ダッシュボードで、ユニークビジター数、ページビュー数などを含みます。
- Speed Insights: 訪問者データに基づく実際のパフォーマンスインサイトで、フィールドでのウェブサイトのパフォーマンスを実用的に把握できます。
- [ログ]((https://vercel.com/docs/observability/runtime-logs?utm_source=next-site&utm_campaign=nextjs-docs&utm_medium=docs): ランタイムおよびアクティビティログで、問題のデバッグや本番環境でのアプリケーションの監視に役立ちます。代わりに、サードパーティツールやサービスのリストについては統合ページを参照してください。
Good to know:
Vercelでの本番環境デプロイメントのベストプラクティスを包括的に理解し、ウェブサイトのパフォーマンスを向上させるための詳細な戦略を含む Vercel Production Checklistを参照してください。
これらの推奨事項に従うことで、ユーザーにとってより高速で信頼性が高く、安全なアプリケーションを構築することができます。