Production Checklist
あなたの Next.js アプリケーションを production に移行する前に、最高のユーザーエクスペリエンス、パフォーマンス、セキュリティを実現するために、実装を検討すべきいくつかの最適化とパターンがあります。
このページでは、アプリケーションの構築、production への移行前、デプロイメント後など、参考にできるベストプラクティスを提供しています。また、自動的な Next.js の最適化についても注意すべき内容を紹介しています。
Automatic optimizations
これらの Next.js の最適化は default によって有効化され、require による設定は必要ありません：
- Server Components: Next.js は default で Server Components を使用します。Server Components は server で実行され、client で rendering するために JavaScript を必要としないため、client 側の JavaScript バンドルのサイズに影響を与えません。これにより、対話性が必要な場合にはClient Componentsを使用することができます。
- コード分割: Server Components は、 route セグメントによる自動コード分割を可能にします。また、状況に応じて、lazy loading Client Components やサードパーティのライブラリを検討することもできます。
- プリフェッチング: 新しい route への link がユーザーの viewport に入ると、 Next.js はバックグラウンドで route をプリフェッチします。これにより、新しい routes へのナビゲーションがほぼ瞬時に行われます。必要に応じてプリフェッチングをオプトアウトすることができます。
- 静的 rendering: Next.js は、build の時間帯に server 上でサーバー Components と Client Components を静的に rendering し、rendering 結果を caches させることでアプリケーションのパフォーマンスを向上させます。適切な routes に対して動的 renderingを選択することも可能です。
- キャッシング: Next.js はデータリクエスト、 Server と Client Components のレンダリング結果、静的アセットなどをキャッシュし、 server 、データベース、バックエンドサービスへのネットワークリクエストの number を減らします。適切な場合には、キャッシングのオプトアウトを選択することができます。
これらの default は、アプリケーションのパフォーマンスを向上させ、各ネットワークの request ごとのデータ転送のコストと量を削減することを目指しています。
During development
アプリケーションの構築中には、最高のパフォーマンスとユーザーエクスペリエンスを確保するために、以下の機能の使用をお勧めします：
ルーティングとレンダリング
- レイアウト: レイアウトを使用してページ間で UI を共有し、ナビゲーションで部分的なレンダリングを有効にします。
<Link>component:<Link>component をクライアントサイドのナビゲーションとプリフェッチに使用します。- error ハンドリング: カスタムの error ページを作成することで、キャッチオールエラーと404 エラーを production でエレガントに対処します。
- Composition Patterns: Server と Client Components に対する推奨される構成パターンに従い、
"use client"boundariesの配置を確認して、クライアントサイドの JavaScript バンドルを不必要に増やさないようにしてください。 - dynamic 関数:
cookies()のような dynamic 関数やsearchParamsprop を使うと、対象の route が全て dynamic 描画 (Root Layoutで使用されている場合は、アプリケーション全体)に適用されます。 dynamic 関数の使用は意図的に行い、適切な場所では<Suspense>で囲ってください。
Good to know: 部分的な事前レンダリング(実験的)は、全体の route を dynamic レンダリングにすることなく、部分的に route を dynamic にすることを可能にします。
データ取得とキャッシング
- Server Components: Server Components を使用して server 上でデータをフェッチする利点を活用します。
- Route ハンドラ: Route ハンドラを使って、 Client Components からバックエンドリソースにアクセスします。しかし、追加の server request を避けるために、 Server Components から Route ハンドラを呼び出さないでください。
- ストリーミング: Loading UI と React Suspense を使用して、UI を徐々に server から client へ送信し、データが取得されている間、全体の route が blocking されるのを防ぎます。
- Parallel データフェッチング: 適切な場合には、データを '' parallel '' でフェッチすることでネットワークのウォーターフォールを減らします。また、適切な場合にはデータのプリロードも検討してください。
- データキャッシング: あなたのデータリクエストがキャッシュされているかどうかを確認し、適切な場合はキャッシングに参加してください。
fetchを使用しないリクエストがキャッシュされていることを確認してください。 - 静的イメージ:
publicディレクトリを使用して、アプリケーションの静的アセット(例：イメージ)を自動的に cache します。
UI とアクセシビリティ
- フォームとバリデーション: フォーム送信を処理するために Server Actions を使用し、 server-side バリデーションとエラー処理を行ってください。
- フォントモジュール: フォントモジュールを使用してフォントを最適化します。これにより、フォントファイルが他の静的アセットと一緒に自動的にホストされ、外部ネットワークリクエストが削除され、layout shift が削減されます。
<Image>Component: Image Component を使用して画像を最適化し、 layout のシフトを防ぎ、WebP や AVIF のような最新の formats で提供します。<Script>Component: スクリプト Component を使用して、サードパーティの scripts を最適化します。これにより、 scripts が自動的に延期され、メインの thread を blocking するのを防ぎます。- ESLint: 内蔵の
eslint-plugin-jsx-a11yplugin を使用して、早期にアクセシビリティの問題をキャッチします。
Security
- 汚染: データオブジェクトや特定の値を汚染することにより、敏感なデータが client に露出するのを防ぎます。
- Server Actions: ユーザーが Server Actions を呼び出すための認証が得られていることを確認します。推奨されるセキュリティ対策をご確認ください。
- Environment Variables: あなたの
.env.*ファイルが.gitignoreに追加されていて、公開 variables だけがNEXT_PUBLIC_で接頭語付けされていることを確認してください。 - Content Security Policy: クロスサイトスクリプティング、クリックジャッキング、その他の code インジェクション攻撃など、さまざまなセキュリティ脅威からアプリケーションを保護するために、Content Security Policy を追加することを検討してください。
Metadata と SEO
- Metadata API: ページタイトルや説明文などを追加することで、アプリケーションの SEO を改善するために Metadata API を使用してください。
- Open Graph (OG)の画像: ソーシャルシェアリングのためのアプリケーションを準備するための OG 画像を作成します。
- SitemapsとRobots: サーチエンジンがあなたのページをクロールし、 index するのを助けるために、sitemaps と robots ファイルを生成します。
Type セーフティ
- TypeScript とTS Plugin: 型の安全性を高め、早期にエラーを検出するためには、 TypeScript と TypeScript plugin を使用してください。
Before going to production
next build を実行してアプリケーションをローカルに build し、builderror をキャッチすることができます。その後、next startを実行して、本番環境に近い環境でアプリケーションのパフォーマンスを測定できます。
Core Web Vitals
- Lighthouse : ユーザーがあなたのサイトをどのように体験するか、そして改善の余地を見つけるために、シークレットモードで Lighthouse を実行してください。これは模擬の test であり、フィールドデータ(例えば Core Web Vitals など)を見てもらうべきです。
useReportWebVitalshook: この hook を使用して、Core Web Vitals のデータを analytics ツールに送信します。
バンドルの分析
あなたの JavaScript バンドルの size を分析し、アプリケーションのパフォーマンスに影響を与えている可能性のある大きな modules と依存関係を特定するために、@next/bundle-analyzer pluginを使用してください。
さらに、以下のツールを使うと、新たな依存関係をアプリケーションに追加した際の影響を理解することができます：
After deployment
あなたのアプリケーションをどこに deploy するかによって、アプリケーションのパフォーマンスを監視し改善するための追加のツールや統合にアクセスできるかもしれません。
Vercel のデプロイメントには、次のことをお勧めします：
- Analytics : あなたのアプリケーションのトラフィック、特に number のユニークビジターやページビューなどを理解するのに役立つ組み込みの analytics dashboard 。
- Speed Insights : 訪問者データに基づく実際のパフォーマンスの洞察を提供し、あなたのウェブサイトが実際のフィールドでどのようにパフォーマンスしているかの実用的な視点を提供します。
- ログ記録 : Runtime およびアクティビティログは、問題のデバッグと production のアプリケーション監視に役立ちます。または、サードパーティのツールやサービスのリストについては、統合ページ をご覧ください。
Good to know:
Vercel での Production デプロイについてのベストプラクティスを包括的に理解し、ウェブサイトのパフォーマンスを向上させるための詳細な戦略を含めて参照するためには、Vercelproduction チェックリスト を参照してください。
これらの推奨事項に従うと、ユーザー向けのより高速で信頼性の高い、安全なアプリケーションを build する助けになります。