Production Checklist
あなたの Next.js アプリケーションを production に移行する前に、最高のユーザーエクスペリエンス、パフォーマンス、セキュリティを実現するために、実装を検討すべきいくつかの最適化とパターンがあります。
このページでは、アプリケーションの構築、production への移行前、デプロイメント後など、参考にできるベストプラクティスを提供しています。また、自動的な Next.js の最適化についても注意すべき内容を紹介しています。
Automatic optimizations
これらの Next.js の最適化は default によって有効化され、require による設定は必要ありません：
- コード分割: Next.js は自動的にアプリケーションのコードをページごとに分割します。これは、現在のページに必要なコードだけがナビゲーション時にロードされることを意味します。場合によっては、サードパーティのライブラリを遅延ロードすることも検討してみてください。
- Prefetching: 新しい route への link がユーザーの viewport に入ると、 Next.js はバックグラウンドでその route をプリフェッチします。これにより、新しい routes へのナビゲーションがほぼ瞬時に行われます。必要に応じて、プリフェッチを無効にすることもできます。
- Automatic Static Optimization: Next.js は、ページが静的(事前 rendering 可能)であるかどうかを自動的に判断するため、ブロッキングデータ要件がない場合に限ります。最適化されたページは cache 可能で、複数の CDN ロケーションからエンドユーザーに配信できます。適切な場合には、server-siderenderingを選択することも可能です。
これらの default は、アプリケーションのパフォーマンスを向上させ、各ネットワークの request ごとのデータ転送のコストと量を削減することを目指しています。
During development
アプリケーションの構築中には、最高のパフォーマンスとユーザーエクスペリエンスを確保するために、以下の機能の使用をお勧めします：
ルーティングとレンダリング
<Link>component:<Link>component をクライアントサイドのナビゲーションとプリフェッチに使用します。- カスタムエラー: 500および404 エラーを円滑に処理する
データ取得とキャッシング
- API Routes: Route ハンドラを使用してバックエンドリソースにアクセスし、機密のシークレットが client に露出するのを防ぎます。
- データキャッシング: データのリクエストがキャッシュされているかどうかを確認し、適切な場合にキャッシングを選択します。
getStaticPropsを使用しないリクエストが適切な場所でキャッシュされていることを確認します。 - Incremental Static Regeneration: 全サイトを再構築せずに、build 後の静的ページを更新するために Incremental Static Regeneration を使用します。
- 静的画像:
publicディレクトリを使用して、アプリケーションの静的アセット(例：画像)を自動的に cache します。
UI とアクセシビリティ
- フォントモジュール: フォントモジュールを使用してフォントを最適化します。これにより、フォントファイルが他の静的アセットと一緒に自動的にホストされ、外部ネットワークリクエストが削除され、layout shift が削減されます。
<Image>Component: Image Component を使用して画像を最適化し、 layout のシフトを防ぎ、WebP や AVIF のような最新の formats で提供します。<Script>Component: スクリプト Component を使用して、サードパーティの scripts を最適化します。これにより、 scripts が自動的に延期され、メインの thread を blocking するのを防ぎます。- ESLint: 内蔵の
eslint-plugin-jsx-a11yplugin を使用して、早期にアクセシビリティの問題をキャッチします。
Security
- Environment Variables: あなたの
.env.*ファイルが.gitignoreに追加されていて、公開 variables だけがNEXT_PUBLIC_で接頭語付けされていることを確認してください。 - Content Security Policy: クロスサイトスクリプティング、クリックジャッキング、その他の code インジェクション攻撃など、さまざまなセキュリティ脅威からアプリケーションを保護するために、Content Security Policy を追加することを検討してください。
Metadata と SEO
<Head>Component:next/headcomponent を使用して、ページタイトル、説明などを追加します。
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 など)を見てもらうべきです。
バンドルの分析
あなたの 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 する助けになります。