Lectores como tú ayudan a apoyar a MUO. Cuando realiza una compra utilizando enlaces en nuestro sitio, podemos ganar una comisión de afiliado. Leer más.

Next.js es un marco poderoso para crear aplicaciones React de alto rendimiento. Una de sus características es la capacidad de crear diseños personalizados para sus páginas, lo que le permite crear un diseño coherente que sea fácil de mantener y actualizar en toda su aplicación.

Creación de un componente de diseño personalizado en Siguiente. JS

En la carpeta denominada componentes en su proyecto Next.js, cree Diseño.jsx y agregue el siguiente código para crear el componente de diseño.

importar Cabeza de'siguiente/cabeza'
importar Encabezamiento de'./Encabezado.jsx'
importar Pie de página de'./Pie de página.jsx'
constante Diseño = (niños) => (



Mi aplicación<<span>/title></span><br> <link rel="<span">"stylesheet" href=<span>"/static/css/style.css"</span> /><br> <<span>/Head></span><br> <encabezado></encabezado><br> {hijos}<br> <pie de p></pie><br> <<span>/div></span><br>)<br><span>exportar</span> <span>predeterminado</span> Diseño<br> < p>Este componente importa los componentes de encabezado y pie de página y <span>acepta elementos secundarios como accesorios</span><div>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- deniza1 -->
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3781984532523932" data-ad-slot="1606568164" data-ad-format="auto" data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
<a href="https://greatfon.com">instagram viewer</a>
</div>. Muestra los <strong>hijos</strong> entre los componentes de encabezado y pie de página. Cuando envuelve una página con este diseño, el encabezado y el pie de página se mostrarán en la parte superior e inferior.<h2 id="usando-el-componente-de-diseño"> Usando el Componente de diseño </h2>
<p>Para usar el componente de diseño, impórtelo a un componente de página y utilícelo como se muestra a continuación.</p> <pre> <code><span>importar</span> Diseño <span>desde</span> <span>'../components/Layout'</span><br><span>const</span> Página = <span><span>()</span> =></span> (<br> <dise><br> <h1>Inicio<<span>/h1></span><br> <<span>/Layout></span><br>)<br><span>exportar</span> <span> página predeterminada</span><br>
</h1></dise></code> </pre>
<p>Aplicará el diseño de esta página. Puede repetir este proceso en todas las páginas a las que desee aplicar el diseño.</p>
<p>Para usar el diseño en todas las páginas de las aplicaciones a la vez, importe el componente de diseño en el archivo <strong>/page/_app.js</strong> y utilícelo de la siguiente manera.</p> <pre> <code><span>import</span> Layout <span>from lapso> <span>"../components/layout"</span>;<br><span><span>función</span> <span>MyApp</span>(<span>{ Componente, pageProps } tramo>) </span>{ <br> <span>return</span> ( <br> <dise> <br> <componente></componente> <br> <<span>/Layout> </span><br> ) ;<br>}</dise></span></span></code> </pre>
<p>Los ejemplos mostrados hasta ahora use las carpetas de 12 páginas de Next.js. En Next.js 13, crea el diseño en la carpeta de la aplicación (al momento de escribir, está en versión beta).</p>
<h2 id="creando-un-diseño-personalizado-en-la-carpeta-de-la-aplicación"> Creación de un diseño personalizado en la carpeta de la aplicación </h2>
<p>La <span>carpeta de la aplicación en Next.js 13 </span>requiere que cree un diseño raíz en su base. Este es el diseño que Next.js aplicará a todas las páginas de su aplicación.</p>
<p>Para demostrarlo, cree un archivo llamado <strong>layout.jsx</strong> y agregue el siguiente código. p> </p>
<pre> <code><span>exportar</span> <span>predeterminado</span> <span><span>función</span> <span>RootLayout</span>(<span>{ niños } tramo>) </span>{<br> <span>volver</span> (<br> "en"</span>><br> {niños}<<span>/body></span><br> <<span>/html></span>< br/> );<br>}<br></code> </pre>
<p>El componente de diseño raíz acepta y representa el <strong>niños</strong>. A continuación se presentan algunas de las cosas que debe saber sobre un diseño raíz:</p>
<ul> <li> Debe incluirlo en la carpeta de la aplicación. </li> <li> Reemplaza a <strong>_app.js</strong> y <strong>_document.js</strong> en la carpeta de páginas de Next.js 12. </li> <li> Tienes que incluir explícitamente el HTML y la etiqueta del cuerpo. </li> <li> Es un componente de servidor por defecto. </li> </ul>
<p>Como se mencionó, el diseño raíz se aplica a todas las páginas, entonces, ¿cómo se crean diseños personalizados para diferentes segmentos de ruta?</p>
<p>En la carpeta de su aplicación, puede definir una ruta creando carpetas para cada ruta segmento. Por ejemplo, la creación de una carpeta llamada <strong>artículos</strong> se asigna a la ruta de URL <strong>aplicación/artículos</strong>. Para agregar más segmentos de ruta, cree una subcarpeta dentro de la carpeta de ruta principal. Por ejemplo, agregar una carpeta llamada <strong>tendencias</strong> dentro de la carpeta <strong>artículos</strong> se asigna a la ruta de la URL. <strong>app/articles/trending</strong>.</p>
<p>Cuando agrega un componente <strong>layout.jsx</strong> a una carpeta de ruta, se aplicará a todas las páginas dentro de esa segmento de ruta y sus subcarpetas. Por ejemplo, agregar un componente de diseño a la carpeta <strong>artículos</strong> se aplicará a todas las páginas de la ruta de artículos, incluidas las de la subcarpeta <strong>tendencia</strong>. Si también agrega un componente de diseño en la carpeta <strong>tendencias</strong>, el diseño en la carpeta de artículos se anidará dentro de ella.</p>
<h2 id="advantages-of-using-layouts"> Ventajas de usar diseños </h2>
<p>Next.js le permite crear componentes de diseño que puede reutilizar en diferentes paginas Esto le permite tener una apariencia uniforme en su sitio web sin duplicar el código en varias páginas. Además, los diseños lo ayudan a implementar cambios rápidamente porque no necesita realizar cambios en cada página.</p>