reactjs - Next.js - route based modal

Question

When using Next.js, I want to show a modal based on a url, on top of another page.

If gallery.js is the page component, I want /gallery/image/1232132 to display a modal with an image, on top of the gallery page.

Is that possible?

Answer 1

If I understand your question correctly you want to add deep links to the individual gallery items. This is possible, but you need a custom server to handle custom routes.

The first thing you need to do is setup the routes. I shared an example here: using React router with Next JS route.

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

routes
    .add('gallery', '/gallery')
    .add('gallery-item', '/gallery/image/:image', 'gallery')