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

This question is a bit old, but since March 2020 there's a full example on the official Next.js repo (you should probably use this since it must be the "recommended way" by the maintainers):

https://github.com/vercel/next.js/tree/canary/examples/with-route-as-modal

Here's the original issue:

https://github.com/vercel/next.js/issues/8023

And the related PR:

https://github.com/vercel/next.js/pull/11473

Answer 2

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')

Then you can access this parameter in the getInitialProps method, and render the modal if the image parameter is set:

import React from 'react';
import PropTypes from 'prop-types';

export default class Gallery extends React.Component {
    static propTypes = {
        image: PropTypes.string
    };
    
    static getInitialProps({query: {image}}) {
        return {image};
    }

    render() {
        const {image} = this.props;

        return (
            <div>
                {image &&
                    // render modal
                }
                // render gallery
            </div>
        );
    }
}

Answer 3

In Nextjs 13.4 it is possible using Intercepting Routes

Intercepting routes allows you to load a route within the current layout while keeping the context for the current page. This routing paradigm can be useful when you want to "intercept" a certain route to show a different route.

For example, when clicking on a photo from within a feed, a modal overlaying the feed should show up with the photo. In this case, Next.js intercepts the /feed route and "masks" this URL to show /photo/123 instead.

Convention to use

Intercepting routes can be defined with the (..) convention, which is similar to relative path convention ../ but for segments.

You can use:

• (.) to match segments on the same level
• (..) to match segments one level above
• (..)(..) to match segments two levels above
• (...) to match segments from the root app directory