Summary

このRFCはNext.jsに導入される大規模なルーティング改善をまとめたものです。新しいappディレクトリとファイル名規約（layout.js / page.js）を用いて、ネスト可能なレイアウト、サーバーコンポーネントをデフォルトとしたレンダリング、レイアウト内でのデータ取得、React 18の機能（Streaming / Suspense / Transitions）を活用する新ルーターを提供します。既存のpagesは後方互換を維持しつつ、段階的に移行可能です。最新の高度なルーティング（並列ルート、インターセプトルート等）もサポート対象です。

Key Points

• appディレクトリ

  • appはpagesと共存可能で、部分的に移行できる。破壊的変更なし。
  • フォルダ階層がルートセグメントを定義し、最下位セグメントにpage.jsが必要。

• レイアウトの新規約

  • layout.jsでレイアウトを定義。子ツリーはchildrenで受け取る。
  • ルートレイアウト（app/layout.js）は全ルートに適用され、_app.js/_document.jsの置換となる。
  • レイアウトはネスト可能で、兄弟間のナビゲーションではReact stateを再利用（再レンダリングを抑制）。

• レンダリングとコンポーネントの分類

  • app内のファイルはデフォルトでServer Componentsとしてレンダリング。
  • クライアント/サーバー識別は*.client.js / *.server.jsのファイル名規約で明示可能。共有は.js。

• データ取得とパフォーマンス

  • レイアウト内でのデータ取得が可能で、ウォーターフォールを回避する設計を想定。
  • React 18のStreaming / Suspense / Transitionsを内部で利用し、サーバー中心のルーティングでSPAのような挙動を実現。

• 高度なルーティング

  • 並列ルート、インターセプトルート、テンプレート、即時ローディング状態、エラーハンドリングなどを計画。

• 実践的注意点

  • ファイル拡張子はjs|jsx|ts|tsxをサポート。
  • 既存のpagesは引き続き動作するため、段階的な移行が推奨される。

簡潔に言えば、appディレクトリとlayout.js/page.js規約により、状態を保持するネストレイアウト、サーバー主導のレンダリング、効率的なデータフェッチを組み合わせたNext.jsの次世代ルーティングが提供されます。