Nested Layouts in Next.js

Question

I want to create a nested layout in next.js. I have also a parent layout that contains Header and Footer components. I am using that Layout in the _app.js file.

_app.js file

import Layout from "../components/Layouts/Layout";
import "../styles/globals.css";

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </>
  );
}

export default MyApp;

Sidebar.js

import Link from "next/link"
export default function Sidebar() {
    return (
        <div>
            <ul>
                <li><Link href="docs/page1"><a>Page 1</a></Link></li>
                <li><Link href="docs/page2"><a>Page 2</a></Link></li>
                <li><Link href="docs/page3"><a>Page 3</a></Link></li>
                <li><Link href="docs/page4"><a>Page 4</a></Link></li>
                <li><Link href="docs/page5"><a>Page 5</a></Link></li>
            </ul>
        </div>
    )
}

Now I have a docs page with a Sidebar component. Now I do not want to render the Sidebar component on every docs page. I want to create a nested layout that only renders in a particular route. In my case, the nested layout should be rendered in the /docs path. Now I have pages inside the pages/docs directory something like this =>

Now I want a nested layout that would be wrapped up of the parent Layout. The nested layout may contain a Sidebar component.