ドキュメントに記載されたNext.jsアーキテクチャ
Next.jsはReactを中心に構築され、ルーティング、レンダリング、データアクセス、サーバーエンドポイント、コンパイル、バンドルのためのフレームワーク層を提供します。これはアプリケーション向けにドキュメント化された公開のプログラミングモデルを説明するものであり、nextjs.orgの運用に使用される非公開インフラストラクチャを明らかにするものではありません。
App Routerでは、ページ、レイアウト、読み込み状態、エラー、関連する動作のためのファイルによってルートツリーを構成します。レイアウトとページはデフォルトでServer Componentsです。Client Componentsは、状態、イベントハンドラー、エフェクト、ブラウザ専用APIのためにブラウザで実行されるサブツリーを定義します。
公開されているフレームワーク層
| レイヤー | ドキュメントに記載された責務 |
|---|---|
| Reactコンポーネント | ユーザーインターフェースを構成し、サーバーまたはクライアントのコンポーネントツリーを定義する |
| App RouterまたはPages Router | 異なるNext.jsモデルを使用してアプリケーション構造をルートに対応付ける |
| レンダリングシステム | 事前レンダリングまたはリクエスト時の出力を生成し、該当する場合はストリーミングを連携させる |
| キャッシュと再検証 | ルートとデータの動作に従って再利用と鮮度を制御する |
| Route Handlers | App Routerアプリケーション内にHTTPエンドポイントを実装する |
| ビルドツール | サポートされるデプロイ向けにアプリケーションコードとアセットをコンパイルおよびバンドルする |
Next.jsのルートには、サーバーレンダリングされたコンテンツと、必要な箇所に絞ったクライアント操作を含められます。Client Componentが存在しても、そのすべての祖先がブラウザでレンダリングされるアプリケーションになるわけではありません。ただし、選択したクライアント境界は、ブラウザ向けに含まれるモジュールに影響します。
配信の選択肢
- 静的エクスポートは、サポートされていないサーバー機能を必要としないプロジェクト用のファイルを生成します。
- 事前レンダリングは、個々のリクエストが発生する前にルートの出力を準備します。
- 動的レンダリングは、リクエスト時の情報を使用して出力を生成します。
- キャッシュと再検証は、これらの両極の間で再利用と鮮度を管理します。
- リクエスト時の処理やその他のサーバー依存の動作には、互換性のあるランタイムが必要です。
公式のデプロイガイドにはセルフホスティングとプラットフォームアダプターが記載されているため、すべてのNext.jsアプリケーションでVercelが技術的要件になるわけではありません。対応する機能は環境によって異なる場合があります。チームは、ビルドが成功したことから互換性を推測せず、選択した対象環境についてルーティング、キャッシュ、画像の動作、再検証、ストリーミング、Route Handlersを確認すべきです。
