Cómo crear un diseño personalizado en Next.JS
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 uniforme que sea fácil de mantener y actualizar en toda su aplicación.
Creación de un componente de diseño personalizado en Next.JS
En la carpeta denominada components en su proyecto Next.js, cree Layout.jsx y agregue el siguiente código para crear el componente de diseño.
import Head from 'next/head'
import Header from './Header.jsx'
import Footer from './Footer.jsx'
const Layout = (children) => (
<div>
<Head>
<title>My App</title>
<link rel="stylesheet" href="/static/css/style.css" />
</Head>
<Header />
{children}
<Footer />
</div>
)
export default Layout
Este componente importa los componentes de encabezado y pie de página y acepta elementos secundarios como accesorios. Representa a los elementos secundarios 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.
Uso del componente de diseño
Para usar el componente de diseño, impórtelo a un componente de página y utilícelo como se muestra a continuación.
import Layout from '../components/Layout'
const Page = () => (
<Layout>
<h1>Home</h1>
</Layout>
)
export default Page
Aplicará el diseño a esta página. Puede repetir este proceso en todas las páginas a las que desee aplicar el diseño.
Para usar el diseño en todas las páginas de las aplicaciones a la vez, importe el componente de diseño al archivo /page/_app.js y utilícelo de la siguiente manera.
import Layout from "../components/layout";
function MyApp({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
);
}
Los ejemplos mostrados hasta ahora usan 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).
Creación de un diseño personalizado en la carpeta de la aplicación
La carpeta de la aplicación en Next.js 13 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.
Para demostrarlo, cree un archivo llamado layout.jsx y agregue el siguiente código.
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
El componente de diseño raíz acepta y representa a los elementos secundarios . A continuación se presentan algunas de las cosas que debe saber sobre un diseño de raíz:
- Debes incluirlo en la carpeta de la aplicación.
- Reemplaza _app.js y _document.js en la carpeta de página de Next.js 12.
- Tienes que incluir explícitamente el HTML y la etiqueta del cuerpo.
- Es un componente de servidor por defecto.
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?
En la carpeta de su aplicación, puede definir una ruta creando carpetas para cada segmento de ruta. Por ejemplo, la creación de una carpeta llamada artículos se asigna a la ruta de la URL aplicación/artículos . Para agregar más segmentos de ruta, cree una subcarpeta dentro de la carpeta de ruta principal. Por ejemplo, agregar una carpeta llamada trending dentro de la carpeta de artículos se asigna a la ruta de URL app/articles/trending .
Cuando agrega un componente layout.jsx a una carpeta de ruta, se aplicará a todas las páginas dentro de ese segmento de ruta y sus subcarpetas. Por ejemplo, agregar un componente de diseño a la carpeta de artículos se aplicará a todas las páginas de la ruta de artículos, incluidas las de la subcarpeta de tendencias . Si también agrega un componente de diseño en la carpeta de tendencias , el diseño en la carpeta de artículos se anidará dentro de él.
Ventajas de usar diseños
Next.js le permite crear componentes de diseño que puede reutilizar en diferentes páginas. 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.
Deja una respuesta