Creating a Next.js like routing system in React.js

[yousufkalim]

I'm thinking about creating a Next.js like routing system in React.js. I'm not sure if this is something that people would be interested in, so I wanted to share my idea with the community and see what you think.

The idea is to use the React Router library to create a routing system that is similar to the one used in Next.js. This would allow developers to create complex web applications with multiple pages and routes without having to use Next.js.

I'm not sure if this is a feasible idea, but I'm willing to give it a try. If you're interested in helping me out, please let me know.

Here are some of the things that I'm thinking about:

• How can we use the React Router library to create a routing system that is similar to the one used in Next.js?
• How can we interact with CLI to know about the pages structure required to create routes?
• What are the pros and cons of using this approach?
• Is this something that people would be interested in using?

I'm open to any feedback that you have. Please let me know what you think.

I hope this helps!

[Normal-DV]

hey there .
Recently i have been interested in same idea . a routing system like nextjs in react . the reason that this idea came up is to avoid coding similar codes like defining routes . i am writing some scripts to make this idea happen but before it let me know about any solution you have got recently or not since this idea was written by you for a long time .

[Tanx-1811]

I think this is definitely feasible, and I'd be interested in seeing it developed.

Using React Router as the underlying router while adding a file-based routing layer on top could provide a Next.js-like developer experience without requiring developers to adopt the full Next.js framework.

For example, a structure like:

src/pages/
├── index.jsx
├── about.jsx
├── users/
│ ├── index.jsx
│ └── [id].jsx

could automatically generate routes such as:

/
/about
/users
/users/:id

The main challenge would be building the file system scanner and route generator. A CLI or build plugin could analyze the pages directory and generate a route configuration file for React Router.

Something similar could be done using Vite plugins, code generation, or Node.js filesystem APIs.

The main advantage would be simplicity and familiarity for developers who like Next.js-style routing but want to build a client-side React application. The downside is that the project would need to clearly differentiate itself from existing solutions such as React Router's framework features, TanStack Router, and existing file-based routing plugins.

I think the best way to validate the idea would be to build a small MVP first:

1. File-based routing
2. Dynamic routes like [id]
3. Nested layouts
4. Catch-all routes
5. CLI command to generate the route manifest

If the developer experience feels significantly easier than manually configuring React Router, then I think there could definitely be interest.

I'd suggest starting small and publishing a proof of concept. The biggest value of the project would probably be the developer experience rather than replacing React Router itself.