Production Checklist
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 Components と Client Components を静的にレンダリングし、レンダリング結果をキャッシュしてアプリケーションのパフォーマンスを向上させます。必要に応じ て、特定のルートに対して動的レンダリングを有効化できます。
- キャッシュ: Next.js は、サーバー、データベース、バックエンドサービスへのネットワークリクエスト数を減らすために、データリクエスト、Server Components と Client Components のレンダリング結果、静的アセットなどをキャッシュします。必要に応じて、キャッシュを無効にすることもできます。
これらのデフォルトは、アプリケーションのパフォーマンスを向上させ、各ネットワークリクエストで転送されるコストとデータ量を削減することを目的としています。
開発中
アプリケーションを構築する際には、最高のパフォーマンスとユーザーエクスペリエンスを保証するために、以下の機能を使用することをお勧めします:
ルーティングとレンダリング
- レイアウト: レイアウトを使用して、ページ間で UI を共有し、ナビゲーションの部分レンダリングを有効にします。
<Link>
コンポーネント: クライアントサイドのナビゲーションとプリフェッチには<Link>
コンポーネントを使用します。- Error Handling: カスタムエラーページを作成することで、catch-all errorsや 404 errors を適切に処理できます。
- 構成パターン: Server Components と Client Components の推奨される構成パターンに従い、クライアント側の JavaScript バンドルが不必要に増えないように、
"use client"
境界 の場所を確認してください。 - 動的関数:
cookies()
やsearchParams
prop のような動的な関数は、ルート全体 (ルートレイアウトで使用する場合はアプリケーション全体) を動的レンダリングすることに注意してください。動的関数の使用が意図的であることを確認し、適切な場合は<Suspense>
境界でラップしてください。
Good to know: 部分プリレンダリング (プレビュー) は、ルート全体をダイナミックレンダリングにすることなく、ルートの一部をダイナミックレンダリングにします。
データのフェッチとキャッシュ
- Server Components: Server Components を使用してサーバー上でデータを取得するメリットを活用します。
- Route Handlers: Client Components からバックエンドリソースにアクセスするには、Route Handler を使用します。追加のサーバーリクエストを避けるため、Server Components から Route Handler を呼び出さないでください。
- Streaming: Loading UI と React Suspense を使用して、UI をサーバーからクライアントに徐々に送信し、データの取得中にルート全体がブロックされるのを防ぎます。
- パラレルなデータフェッチ: パラレルにデータをフェッチすることで、ネットワークのウォーターフォールを減らします。また、必要に応じてデータのプリロードも検討してください。
- データのキャッシュ: データリクエストがキャッシュされているかどうかを確認し、必要に応じてキャッシュを選択します。
フェッチ
を使用しないリクエストがキャッシュされていることを確認してください。 - 静的画像: アプリケーションの静的アセット(画像など)を自動的にキャッシュするには、
public
ディレクトリを使用します。
UI とアクセシビリティ
- Server Actionsとミューテーション: Server Actions を使用して、フォーム送信、サーバーサイドの検証、エラーハンドリングを行います。
- フォントモジュール: フォントモジュールを使用すれば、フォントを最適化できます。フォントファイルを他の静的アセットと一緒に自動的にホストし、外部ネットワークへのリクエストを削除して、レイアウトのずれを軽減します。
<Image>
コンポーネント: レイアウトのずれを防ぎ、WebP や AVIF のような最新のフォーマットで提供する Image コンポーネントを使用することで画像を自動的に最適化します。<Script>
コンポーネント: スクリプトを自動的に遅延させ、メインスレッドをブロックしないようにする Script コンポーネントを使用することでサードパーティのスクリプトを最適化します。- ESLint: 組み込みの
eslint-plugin-jsx-a11y
プラグインを使用して、アクセシビリティの問題を早期に発見してください。
セキュリティ
- 汚染: データオブジェクトや特定の値を汚染することで、センシティブなデータがクライアントに公開されるのを防ぐ。
- Server Actions: ユーザーが Server Actions を呼び出す権限があることを確認します。推奨されるセキュリティ対策を確認してください。
- 環境変数:
.env.*
ファイルが.gitignore
に追加され、パブリック変数だけがNEXT_PUBLIC_
でプレフィックスされていることを確認してください。 - Content Security Policy: クロスサイトスクリプティング、クリックジャッキング、その他のコードインジェクション攻撃などの様々なセキュリティ脅威からアプリケーションを保護するために、コンテンツセキュリティポリシーを追加することを検討してください。
メタデータと SEO
- メタデータ API: メタデータ API を使って、ページのタイトルや説明文などを追加し、アプリケーションの検索エンジン最適化(SEO)を改善しましょう。
- Open Graph (OG) 画像: OG 画像を作成し、ソーシャル共有用のアプリケーションを準備します。
- サイトマップとロボッツテキスト: サイトマップとロボッツテキストファイルを生成することで、検索エンジンのクロールとインデックスを支援します。
型安全
- TypeScript と TS プラグイン: TypeScript と TypeScript プラグインを使用することで、型安全性が向上し、エラーを早期に発見できるようになります。