React 프로젝트에서도 Next.js 처럼 디렉터리 기반 라우팅을 해주는 vite 플러그인(vite-plugin-pages)이 있어서 사용하고 적용해보게 되었습니다. 예전 Next.js 처럼 디렉터리 기반 라우팅 적용이며, layout, page 와 같은 최신 Next.js 같은 방식으로는 아직 적용하지 않았습니다.
개요
제가 next.js 에서 가장 편하다고 생각하는 기능은 디렉터리 기반 라우팅입니다. 이번에 팀 내에서 새로 시작하는 프로젝트는 next.js 를 사용하지 않습니다. 그래서 혹시나 하는 마음에 vite 플러그인 중에서 디렉터리 기반 라우팅 해주는걸 분명 누가 만들지 않았을까 싶어서 찾아봤는데, 아니나 다를까 있었습니다! 적용도 간단하고, 편해서 정리하게 되었습니다.
vite-plugin-pages
해당 플러그인 이름은
vite-plugin-pages 입니다. vue 플러그인으로 먼저 나와서 그런지 react 쪽은 기능이 조금 적습니다. 이 플러그인은 react-router-dom 과 같이 사용해야하며, 아주 약간의 보일러 플레이트가 있습니다. - Vite config
import { defineConfig } from "vite"; import Pages from "vite-plugin-pages"; // https://vitejs.dev/config/ export default defineConfig({ plugins: [ // ... Pages({ dirs: "src/pages", }), ], });
- vite-env.d.ts
declare module "virtual:generated-pages-react" { import { RouteObject } from "react-router-dom"; const routes: RouteObject[]; export default routes; }
- App 컴포넌트와 첫 index.html
// App.tsx import { useRoutes } from "react-router-dom"; import { Suspense } from "react"; import routes from "virtual:generated-pages-react"; function App() { return <Suspense fallback={<p>Loading...</p>}>{useRoutes(routes)}</Suspense>; } export default App;
// main.tsx import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; import App from "./App.tsx"; import "./index.css"; import { BrowserRouter } from "react-router-dom"; createRoot(document.getElementById("root")!).render( <StrictMode> <BrowserRouter> <App /> </BrowserRouter> </StrictMode> );
적용 후 사용
next.js 14 버전 처럼의 layout.tsx 등의 지원은 react 쪽에서는 안 되는 것 같았고, 기본적인 pages 하위 라우팅과 path param 적용 정도 까지 되는 것 같습니다.
