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