Remix / React Router v7

React Router v7 を Framework モード (Remix の後継) で使うテンプレートです。Loader / コンポーネント / ルートレイアウトは app/ 配下に置かれ、ReScript がホームの Loader と Greet コンポーネントを担います。SSR は @react-router/dev の Vite プラグインで既定有効、本番は @react-router/serve 経由で動作します。

生成されるレイアウト

app/
├── root.tsx
├── routes.ts
├── routes/
│   └── home.tsx
├── components/
│   └── Greet.res
├── loaders/
│   └── HomeLoader.res
└── __tests__/
    └── Greet.test.mjs
vite.config.ts
react-router.config.ts
tsconfig.json
rescript.json
package.json

主なファイル

  • app/root.tsx — 全ルートで共有する Layout と App シェルを定義します。

  • app/routes.ts — @react-router/dev/routes のヘルパーを使ったルート明示登録。routes/home.tsx を index としてマウントします。

  • app/routes/home.tsx — ホームルート。react-router typegen が生成する型付き Route 名前空間を使い、ReScript の Loader とコンポーネントを .res.mjs 経由で読み込みます。

  • app/loaders/HomeLoader.res — ReScript で書かれたサンプル Loader。ルート側の TSX グルーを薄く保ち、Loader 単体でユニットテスト可能にします。

  • vite.config.ts — reactRouter() プラグインのみ。router プラグインが React refresh ランタイムを設定済みのため @vitejs/plugin-react は不要です。

npm スクリプト

コマンド

説明

dev

rescript -w と並行して react-router dev を起動します。

build

ReScript をコンパイルしてから react-router build を実行します。

start

@react-router/serve 経由で本番バンドルを配信します。

typecheck

ルート型を生成してから tsc --noEmit を実行します。

test

Vitest を実行します。

Day-two ポインタ

  • ルート追加 — app/routes.ts を route(":id", "routes/show.tsx")、layout("routes/dashboard.tsx", [...]) などで拡張します。編集後は pnpm typecheck を実行して型付き +types/... モジュールをリフレッシュしてください。

  • Action 追加 — ルートファイルで export async function action(args: Route.ActionArgs) をエクスポートし、<Form method="post"> から POST します。

  • SPA モードへ切り替え — クライアント専用デプロイの場合は react-router.config.ts で ssr: false を指定します。