title: How to extend a page in Nextjs. Like a nested switch in react-router-dom
body: <p>I have been using react for sometime,I decided to try out nextjs. I am building a dashboard, that have a side navigation, and several pages will use that sidebar. What i do in reactjs is have a nested switch. And define my routes. Something like this:</p>
  <pre><code>&lt;Switch&gt;
        &lt;Route path=&quot;/pageOne&quot;&gt;
          &lt;PageOne /&gt;
        &lt;/Route&gt;
        &lt;Route path=&quot;/pageTwo&quot;&gt;
          &lt;pageTwo /&gt;
        &lt;/Route&gt;
        
      &lt;/Switch&gt;
  </code></pre>
  <p>but I have gone through a lot of resources, but non seems to talk about extending a page. Another option I am thinking of is to create a subfolder in the dashboard folder, then I will need to import the sidebar component on all the other pages, but this method breaks the DRY principle.</p>
  <p>What is the better way to do this?</p>
  <p><em>EDIT</em></p>
  <p>This is what I am trying to archive. When I click the links in the sidebar, I navigate just the right side of the page, while the sidebar persists across the page.
  <img src="https://i.stack.imgur.com/oXonc.jpg" alt="Dashboard preview" /></p>