🧭 React Router Too Verbose? Try This: File-Based Routing like Next.js — In Any React App!

React’s flexibility is powerful — but when it comes to routing, things can quickly get verbose. If you love how Next.js App Router handles file-based routing, nested layouts, and grouped routes, I’ve got something exciting:

Meet react-next-router — a plug-and-play file-based routing system for React that mimics Next.js App Router behavior — but for any React app!

🚀 Features

• ✅ Next.js App Router-like routing in React apps
• ✅ Auto-load pages from the /app folder
• ✅ Support for Layouts via layout.jsx
• ✅ Route Groups with (group) folders
• ✅ Dynamic routes with [slug], [...slug], [[slug]]
• ✅ Error boundaries via error.jsx
• ✅ 404 Not Found handling with 404.jsx
• ✅ Loader support for data fetching loader.jsx
• ✅ Fully type-safe (TypeScript supported)

src/
 └── app/
      ├── layout.jsx          # Root layout
      ├── page.jsx            # Index route ('/')
      ├── about/
      │    └── page.jsx       # '/about'
      ├── blog/
      │    ├── [slug]/
      │    │     ├── page.jsx   # '/blog/:slug'
      │    │     └── loader.jsx  # Loader for data fetching
      │    └── layout.jsx     # Layout for '/blog/*'
      ├── (admin)/
      │    ├── dashboard/
      │    │      └── page.jsx # '/dashboard'
      │    └── layout.jsx     # Layout for group
      ├── error.jsx           # Error boundary
      ├── 404.jsx             # Not Found page
      ├── loading.jsx         # Loading component (renders while loading)

🚀 Usage

Example src/app/page.jsx:

export default function Home({ data }) {
  return <h1>Home Page {data && <span>{data.message}</span>}</h1>;
}

Example src/app/layout.jsx:

export default function RootLayout({ children }) {
  return (
    <div>
      <header>Header Content</header>
      <main>{children}</main>
    </div>
  );
}

Example src/app/loader.jsx:

// This loader runs before the sibling page.jsx and its return value is passed as the 'data' prop
export default async function loader() {
  // You can fetch from any API or return any data
  const res = await fetch("https://api.example.com/message");
  const data = await res.json();
  return { message: data.message };
}

Example src/App.jsx:

import { AppRouter } from "react-next-router";

function App() {
  return <AppRouter />;
}
export default App;

📎 Links

• 🔗 NPM: react-next-router
• 🧠 GitHub: github.com/prasanthreact/react-next-router
• 📦 Demo: StackBlitz Example