vite-plugin-next-react-router
TypeScript icon, indicating that this package has built-in type declarations

0.7.1 • Public • Published

vite-plugin-next-react-router

GitHub Workflow Status npm

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.

Package Sidebar

Install

npm i vite-plugin-next-react-router

Weekly Downloads

46

Version

0.7.1

License

none

Unpacked Size

43.4 kB

Total Files

16

Last publish

Collaborators

  • peakybingy