ファイルシステムベースのルーター

このランタイムでは、ファイルシステムベースのルーターを使用してアプリケーションを構築することもできます。このルーターを使用すると、Next.jsなどの他のメタフレームワークと同様に、ファイルシステムベースのルーティング構造を作成できます。

react-server CLIを使用する際にアプリケーションのエントリーポイントを指定しない場合、@lazarv/react-serverは自動的にファイルシステムベースのルーターを使用します。

ファイルシステムベースのルーターを使用して開発サーバーを起動するには、次のコマンドを実行します：

pnpm react-server

ファイルシステムベースのルーターを使用してアプリケーションをビルドするには：

pnpm react-server build

ビルドされた本番アプリケーションを通常通り起動するには：

pnpm react-server start

このルーターは標準で型付きルートをサポートしています。TypeScriptを使用する場合、生成された型をプロジェクトに含めることで、すべてのルートが型チェックされます。型付きルートは、Linkコンポーネント、useMatchフック、useClientフックからのnavigate、replace、prefetch関数、またReactServerComponentで利用できる各種アウトレットを使うときにも適用されます。

生成された型をプロジェクトに含めるには、.react-serverディレクトリからの.tsファイルをTypeScript設定に含めるだけです。そのためには、tsconfig.jsonファイルのinclude配列に.react-server/**/*.tsを追加します：

{
  "compilerOptions": {
    // ...
  },
  "include": [/* ... */, ".react-server/**/*.ts"]
}

ルーターは仮想的な@lazarv/react-server/routesモジュールも生成し、すべてのルートの型付きルートディスクリプタをエクスポートします — .Link、.href()、.useParams()、型付きcreatePage / createLayoutヘルパー、ブランド付きアウトレット型など。詳細はルートモジュールのドキュメントを参照してください。

型付きルーティングシステムの完全なガイド — プログラム的なcreateRoute / createRouter API、スキーマバリデーション、軽量パース関数、型付きフック、関数型検索アップデーター、SearchParams変換を含む — については、型付きルーターページを参照してください。ファイルシステムルーター固有の型付きルートについては、ルートを定義するを参照してください。

ファイルシステムベースのルーターは、Next.js特有の機能を使っていなければ、Next.jsプロジェクトとそのまま置き換えて使うことができます。つまり、標準的な機能だけを使っている場合は、両者の間でソースコードを移行しやすいのが特徴です。

ファイルシステムベースのルーターは、Next.jsと以下の機能を共有しています：

• 静的および動的ルート
• レイアウトとページ
• ネストされたルート
• ルートグループ
• パラレルルート
• エラー処理
• ローディング状態

Next.jsタイプのファイルシステムベースのルーターを再現するには、appディレクトリ内のページルートとしてpage.tsxファイルのみを使用できるようにルーターを設定するか、srcディレクトリベースのプロジェクト構造を使用する場合はrootディレクトリをsrc/appに変更します。

{
  "root": "app",
  "page": {
    "include": ["**/page.tsx"]
  }
}