Awesome

vite-plugin-next-react-router

A Next.js style file system based routing plugin for vite, inspired by vite-plugin-pages.

Install

# with npm
npm install vite-plugin-next-react-router -D

# with yarn
yarn add vite-plugin-next-react-router -D

# with pnpm
pnpm add vite-plugin-next-react-router -D

Usage

Add plugin to your vite.config.js

import reactRouterPlugin from 'vite-plugin-next-react-router';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    //...
    reactRouterPlugin(),
  ],
});

Config options like this, this is also the default config below:

export default defineConfig({
  plugins: [
    reactRouterPlugin({
      pageDir: 'src/pages',
      extensions: ['js', 'jsx', 'ts', 'tsx'],
      // like '_app' in Next.js, `_document` is not supported since all rendering is done in client side
      layout: '_layout',
    }),
  ],
});

This plugin will scan your pages folder then automatically inject code to index html, you don't have to write any other code for initial rendering, just like Next.js. There is a example project under /example/react folder.

It follows most of the Next.js style file system based routing rules. You can check their docs here.

If you found any inconsistency with Next.js, please open an issue.