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

[MyrinNew]

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 Home Page {data && {data.message}}

;
}







Example src/app/layout.jsx:






export default function RootLayout({ children }) {
return (

Header Content
{children}


);
}







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 ;
}
export default App;







📎 Links

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

More...