At my company, we’re using Next.js for all front-end applications. My team is developing a client-side application, but we’re using Next.js with disabled file-based routing. We have only one single index.tsx file inside the pages folder where the Router component from react-router-dom is rendered. I was wondering if it’s technically possible to use next/router instead of react-router-dom so that we can drop the unnecessary dependency. Alternatively, is it better to keep react-router-dom and upgrade it to version 6?
I was searching for the answer in the Next.js documenation and it says
The Next.js router allows you to do client-side route transitions between pages
But I can’t find any example of it.
2
Answers
ReactJS
In ReactJS docs: they recommend picking one of the React-powered frameworks popular in the community like Next.JS.
check this Link
About Next.JS Router: The Pages Router utilizes a router system that is based on the file system and operates around the concept of pages. By simply adding a file to the page’s directory, it is immediately accessible as a route.
check this Link
The saddest part of this is that, in order "to align our project with other front-end projects", your higher ups are making you work with a technology they do not understand just because is sounds cool.
Your company is missing out an astronomical opportunity to speed up development, ship better products, and get your developers working with the latest tools for web development.
If you need
react-router-domit means your application has more than one page. Next.js is made exactly for that. It seems scary and complex at first, but what the framework is:Server-side rendering: creates content in advance, by pre-rendering HTML and CSS, that is readily available to the user when they access your website. Also, the application can fetch data on-demand, pre-render the page, and only then send it to the client. What this does in reality is that your blog post page already arrives with the text in it, so you don’t need to call the API in a
useEffecthook.Client-side rendering: sends JavaScript to the client that builds the page right in the browser, which is what React does.
These two parts are made to work with each other. React Router "fakes" navigation by simply changing the content instead of downloading new stuff (rehydration). If you’ve ever used the nested routes and rendering
{children}in your routes you’ll know what I’m talking about.Next can do that too. Way more efficiently that React Router. It also enables all sorts of crazy things such as image optimization, pre-fetching data, pre-downloading pages so the user navigates instantly, and more.
It is possible to use React Router with Next.js, but it is not just bad practice. It’s straight up wrong.
The file-based routing is insanely powerful and makes it possible to create a complex routing structure in literally seconds. Your team should embrace it.
My honest advice is: if you believe in the potential of your project, do your research and at least get the general idea behind the framework. I am sure you will see that Next’s functionalities have the potential to push your development forward drastically. Then you will have arguments to be able to help your team to embrace the tools you already have and don’t use.
If things don’t go well, just "yes ma’am" or "yes sir" out of the situation and try to make the most out of the framework, within the constraints of your team, of course. If you’re the one in charge, you got a great opportunity in your hands. Don’t miss it!
The Next docs are amazing. I started developing with Next from there. And also Vercel’s YouTube channel. Most of the videos are about Vercel’s other products, but they have these short videos about Next and they don’t go into much implementation details, but rather give you overview of features and coding patterns.
Best of luck!