I have a very simple NextJS app where opening a page will update the URL but won't trigger a navigation and will instead display the content inside a modal. The URL still reflects the actual page location and any refresh brings the user there.

When the modal open, I want to still keep the original content off the page faded in the background and the modal should e to the front.

Right now when my modal opens, the original background content disappears rather than faded in the background.

I've replicated the issue in code-sandbox : =/pages/index.js

In the code-sandbox example, when you click the login button, you will see the modal works but the original background disappears. How can I get the background content to just be faded.

Please help.

I have a very simple NextJS app where opening a page will update the URL but won't trigger a navigation and will instead display the content inside a modal. The URL still reflects the actual page location and any refresh brings the user there.

When the modal open, I want to still keep the original content off the page faded in the background and the modal should e to the front.

Right now when my modal opens, the original background content disappears rather than faded in the background.

I've replicated the issue in code-sandbox : https://codesandbox.io/s/replicating-backdrop-disappearing-rqt21?file=/pages/index.js

In the code-sandbox example, when you click the login button, you will see the modal works but the original background disappears. How can I get the background content to just be faded.

Please help.

• javascript
• reactjs
• next.js

• That's because you're navigating to a new login page when pressing the Login link. Your code is triggering a navigation. – juliomalves Commented Feb 11, 2021 at 21:57
• @juliomalves Is there a way to avoid that so I'm not triggering navigation – breaktop Commented Feb 11, 2021 at 22:01

2 Answers 2

As mentioned in the documentation, what you're attempting to do is not possible/practical. You can't simultaneously keep a page loaded while loading another page. If you want to keep the same page loaded, then you'll have to utilize dynamic routes with shallow routing, which I feel is overkill for static authentication pages.

Instead, you should either create a Layout ponent that wraps over the entire app (using _app.js) or selectively wrap each route with a reusable layout ponent.

On a side note, I'd remend avoiding importing the same 3rd party global CSS more than once. If you're importing it more than once, it's a sign that you most likely should be using Next's custom app page for global stylesheets (not required, but should eliminate redundant stylesheet imports).

Demo:

ponents/Layout/index.jsx

/* eslint-disable jsx-a11y/anchor-is-valid */
import Link from "next/link";

export default function Layout({ children }) {
  return (
    <>
      <Link href="/">
        <a className="link">Home</a>
      </Link>
      <Link href="/login">
        <a className="link">Login</a>
      </Link>
      <Link href="/signup">
        <a className="link">Signup</a>
      </Link>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque eos id
        agere, ut a se dolores, morbos, debilitates repellant. Duo Reges:
        constructio interrete. Qualis ista philosophia est, quae non interitum
        afferat pravitatis, sed sit contenta mediocritate vitiorum? Vide ne ista
        sint Manliana vestra aut maiora etiam, si imperes quod facere non
        possim. <i>Quid censes in Latino fore?</i> Ita relinquet duas, de quibus
        etiam atque etiam consideret. <i>Quippe: habes enim a rhetoribus;</i>{" "}
        <b>Sum praesertim illa perdiscere ludus esset.</b>{" "}
      </p>
      {children}
    </>
  );
}

/* eslint-enable jsx-a11y/anchor-is-valid */

pages/_app.js

import "react-responsive-modal/styles.css";
import Layout from "../ponents/Layout";
import "../styles.css";

export default function App({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

pages/index.js

export default function IndexPage() {
  return <h1>Index Page</h1>;
}

pages/login.js

import Router from "next/router";
import { Modal } from "react-responsive-modal";

export default function Login() {
  return (
    <Modal center blockScroll open onClose={() => Router.push("/")}>
      <p>Login</p>
    </Modal>
  );
}

pages/signup.js

import Router from "next/router";
import { Modal } from "react-responsive-modal";

export default function SignupPage() {
  return (
    <Modal center blockScroll open onClose={() => Router.push("/")}>
      <p>Signup</p>
    </Modal>
  );
}

As mentioned in the ments, you are triggering a navigation since your link points to a different page.

To achieve your desired behaviour you could use query params within the same page in conjunction with shallow routing.

export default function IndexPage() {
    const router = useRouter();

    return (
        <div>
            <Link href="/?login=true" as="/login" shallow={true}>
                <a>Login</a>
            </Link>
            <Modal
                center
                blockScroll={true}
                open={!!router.query.login}
                onClose={() => router.push('/', undefined, { shallow: true })}
            >
                <p>Hello World!</p>
            </Modal>
        </div>
    );
}