title: In Next.js How Can I Create a "Modal Link" (ie. Link That Changes URL and Adds a Component, But Doesn't Re-Render Whole Page)
body: <p>When a site has a dialog, it's often done purely in JS, with no &quot;pages&quot; (ie. routing) involved.  However, sometimes you want your dialog to have it's own URL, so that if the user refreshes the page, they come back to the page with the dialog up.</p>
  <p>In Next.js I've managed most of the above.  I have a base page route, and then a second route which renders that page component, plus my dialog component.  When I click the link it changes the URL, and then I see my dialog ... and if I refresh, I still see the page/dialog.</p>
  <p>However, when I first click the link, it re-renders the page, losing other stateful changes.  I thought that using the <code>shallow</code> prop on my link would prevent this, but it didn't (I guess because the dialog routes were different routes, and not just query parameters?).  I also thought perhaps using <code>as</code> instead of <code>href</code> would work ... but it turns out <code>href</code> is required.</p>
  <p>So, to summarize, is it possible in Next.js to create a link which:</p>
  <ol>
  <li><em>does</em> change the URL (to an actual page, not just the query parameters)</li>
  <li><em>does</em> render a new (dialog) component</li>
  <li><em>doesn't</em> re-render the main page component</li>
  </ol>
  <p>P.S. I'm porting a site from Gatsby, where this <em>is</em> possible, and while I could change my routes to use query parameters instead of real routes, that would effectively &quot;delete&quot; a bunch of pages on my site ... with SEO consequences :(</p>