using React router with Next JS route

Question

i have simple question , i am new in Next.JS we have a project and my web application manage routes in BackEnd with Next JS

now my problem is here , i want use React-Router-dom in one section

forexample before im working with Laravel and React

in Laravel I set My Route like This

 Route::get('/reactPage/*' ...)

and then use Clien route with react

but i dont know how handle this with Next JS

( more details => for example i want user click to some link after that user see a page with some link inside of them , if user click that link , react-router-dom handle route and no any request send to Server )

Answer 1

I would recommend using the Next router. You do need to create a custom server in order to overload the default Next routing, but its a trivial task:

// server.js
const { createServer } = require('http');
const next = require('next');
const routes = require('./routes');

const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handler = routes.getRequestHandler(app);

app.prepare().then(() => {
    createServer(handler).listen(port, err => {
        if (err) {
            throw err;
        }
        console.log(`> Ready on http://localhost:${port}`);
    });
});

Then you can define routes, which I do in the routes.js file:

// routes.js
const nextRoutes = require('next-routes');
const routes = (module.exports = nextRoutes());

routes
    .add('landing', '/')
    .add('profile', '/profile', 'profile');