Vite + ReactでもNextjsのようなファイルルーティングをしたい人へ贈るTips

私はNext.jsが好きだ

めっちゃ好きです。あのファイルルーティングがめっちゃ開発が楽になるので好きなんです。
その前提で、Next.jsは使わないけどこのファイルルーティングの機能を使いたい人に贈るTipsです。

前提

Vite + React + React Routerを利用する前提です。
（React Routerがメジャーバージョンアップで結構大幅な修正があったので使う人も怖いと思うかもですが、、、）

結論

これを使おう！これを読んでる人はREADME.mdを見ればわかるはず！！公式ドキュメントが全てだ！！！

実装サンプルはこれ(公式ドキュメント)

...は暴論かと思うので少しだけ解説

インストール

npm i @generouted/react-router react-router

vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import dynamicImport from "vite-plugin-dynamic-import";
import generouted from "@generouted/react-router/plugin";

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    react(),
    dynamicImport(),
    generouted(), // ←これが今回のプラグインです。他のは無視でもいいかもですが。。。
  ],
});

肝になるのが、generouted()です。これが特定のディレクトリを監視してルーティングを自動で生成してくれるプラグインです。

generoutedのConfig

もちろんConfigがあります。

type Options = {
    source: {
        routes: string | string[]; // ルーティングを置いてあるディレクトリのパスです。
        modals: string | string[]; // このプラグインではModalも定義できます。
    };
    output: string; // 型定義付きのrouterHooksを自動生成してくれます。後述...
    format: boolean; // フォーマットするかどうか
};

デフォルトでは

generouted({
    source: {
        routes: "src/pages",
        modals: "src/pages"
    },
    output: "src/router.ts",
    format: false,
})

っぽいっす。これだけはドキュメント漁ってもなかった。。。

outputって何をoutputするの？

devで起動してると、自動で生成してくれます。

src/router.ts

// Generouted, changes to this file will be overridden
/* eslint-disable */

import { components, hooks, utils } from "@generouted/react-router/client";

export type Path = `/` | `/fuga` | `/hihi` | `/hoge`;

export type Params = {};

export type ModalPath = never;

export const { Link, Navigate } = components<Path, Params>();
export const { useModals, useNavigate, useParams } = hooks<
  Path,
  Params,
  ModalPath
>();
export const { redirect } = utils<Path, Params>();

React RouterをWrapしたHooksとかLinkとかNavigateとかを生成してくれる。
これがめっちゃ便利！！！

読み取ってくれるファイル

とりあえずルーティングだけ紹介します。
そのほかは公式のGithubを見よ！

index.tsx

src/pages/index.tsx → /
src/pages/posts/index.tsx → /posts

ネストされたルーティング

src/pages/posts/2022/index.tsx → /posts/2022
src/pages/posts/2022/resolutions.tsx → /posts/2022/resolutions

ダイナミックルーティング

src/pages/posts/[slug].tsx → /posts/:slug
src/pages/posts/[slug]/tags.tsx → /posts/:slug/tags
src/pages/posts/[...all].tsx → /posts/*

レイアウトファイル

_layout.tsxこれがレイアウトファイルです。これだけNextjsとは違います。
実際にページの内容を表示するのはreact-routerの<Outlet />です。

_app.tsx

Next.jsのPageルーティングの_app.tsxの作用とほぼ同じです。
レイアウトファイルと同じく、実際にページの内容を表示するのはreact-routerの<Outlet />です。

最後に

何度でも言いますが、筆者はNextjsのエコシステムが大好きなのですが、開発案件によってはVercelを採用してなかったり、そもそもNextjsは使わずにViteを使ってるところもあると思います。

その上で、あのファイルルーティングを利用したい人はいるとおもうので、その人に届けばと思います。
以上！