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

このフレームワークでは、ファイルシステムベースのルーターを使用してアプリケーションを構築することもできます。このルーターを使用すると、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"]
}

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

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

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

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

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