Quiero crear un diseño anidado en next.js. También tengo un diseño principal que contiene componentes de Header y pie de Footer . Estoy usando ese diseño en el archivo _app.js .

archivo _app.js

 import Layout from "../components/Layouts/Layout"; import "../styles/globals.css"; function MyApp({ Component, pageProps }) { return ( <> <Layout> <Component {...pageProps} /> </Layout> </> ); } export default MyApp;

Barra lateral.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> ) }

Ahora tengo una página de documentos con un componente de Sidebar . Ahora no quiero representar el componente de la Sidebar en cada página de documentos. Quiero crear un diseño anidado que solo se represente en una ruta en particular. En mi caso, el layout anidado debe representarse en la ruta /docs . Ahora tengo páginas dentro del directorio de pages/docs algo como esto =>

Ahora quiero un diseño anidado que se envuelva del Layout principal. El diseño anidado puede contener un componente de Sidebar .