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

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

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

## 開発サーバー

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

```sh
pnpm react-server
```

## ビルド

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

```sh
pnpm react-server build
```

## 起動

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

```sh
pnpm react-server start
```

## 型付きルート

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

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

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

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

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

## Next.jsとの互換性

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

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

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

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

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