Layout en Next JS - Emanuel Lopez

¿Qué es un Layout?

En el desarrollo de aplicaciones web, los layouts son un elemento esencial. Se refieren a la estructura visual que se mantiene constante a lo largo de la aplicación, independientemente de la página específica que el usuario esté visitando.

Los elementos característicos de un layout suelen incluir componentes como el encabezado (Header), el pie de página (Footer), Sidemenu y otros elementos compartidos en todas las páginas.

Sus ventajas

Consistencia en la Experiencia del Usuario

Mantener una estructura visual coherente en todas las páginas de una aplicación web es fundamental para ofrecer una experiencia de usuario satisfactoria. Los layouts permiten esta consistencia al proporcionar un marco visual uniforme, lo que facilita la navegación del usuario, haciéndola más intuitiva y familiar. Esto mejora la usabilidad y la retención.

Gestión y Mantenimiento Eficientes del Código

Separar la estructura visual común en un layout compartido simplifica la gestión y el mantenimiento del código. Los desarrolladores pueden reutilizar fácilmente componentes, lo que resulta en una base de código más limpia y organizada. Esta modularidad es especialmente valiosa en proyectos grandes y complejos, donde la escalabilidad es crucial.

Adaptabilidad de la Interfaz

Los diferentes tipos de layouts permiten adaptar la interfaz a las necesidades específicas de cada sección de la aplicación. Por ejemplo, un layout diseñado para la página de inicio puede centrarse en la presentación visual y las llamadas a la acción, mientras que otro para páginas de contenido puede priorizar la legibilidad y la navegación entre secciones.

Mejora en la Eficiencia y Velocidad de Carga con Next.js

En el contexto de Next.js, los layouts ofrecen un beneficio adicional. Al navegar entre páginas, el diseño general permanece constante, evitando la necesidad de volver a renderizar elementos compartidos como encabezados, barras de navegación o pies de página en cada cambio de página. En su lugar, solo los componentes específicos de cada página se actualizan dinámicamente. Esta optimización proporciona una experiencia más fluida al usuario y contribuye a mantener un rendimiento óptimo, especialmente en aplicaciones con muchas páginas y componentes.

Layouts en Next.js

Ahora que hemos explorado la importancia y las ventajas de los layouts en el desarrollo web, es momento de adentrarnos en cómo podemos implementarlos en Next.js.

Tipos de Layouts en Next.js

Layout Global (Root Layout)

El Layout Global, también conocido como Root Layout en el contexto de Next.js, desempeña un papel fundamental en la estructura y apariencia de toda la aplicación. Puede considerarse un Higher-Order Component (HOC), ya que recibe un children y envuelve toda la aplicación en Next.js. Esto significa que cualquier componente o página renderizada en la aplicación estará encapsulada por el Layout Global.

El Layout Global nos proporciona un lugar centralizado para configurar aspectos importantes de nuestra aplicación, como los estilos globales, las fuentes tipográficas y los metadatos. Además, cualquier cambio realizado en el Layout Global se aplicará a toda la aplicación, lo que garantiza una apariencia coherente en todas las páginas.

/app/layout.tsx

// Importamos los estilos globales y la fuente tipográfica
import '../styles/globals.css'
import { Inter } from 'next/font/google'

// Configuramos la fuente tipográfica Inter
const inter = Inter({ subsets: ['latin'] })

// Metadatos de la aplicación
export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

// Componente para el Layout Global
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="es">
      <body className={inter.className}>
        {/* Aquí se renderizan los componentes hijos */}
        {children}
      </body>
    </html>
  )
}

Local Layouts o Nesting Layouts

Los Local Layouts, también conocidos como Nesting Layouts, son componentes que pueden ubicarse dentro de cada segmento de ruta anidado. Reflejan el comportamiento del Root Layout pero respetan los niveles jerárquicos de los layouts superiores. Esta característica permite definir diseños específicos para diferentes rutas dentro de la aplicación, lo que proporciona la flexibilidad de tener diferentes estructuras visuales dependiendo de la ruta que esté siendo accedida.

Por ejemplo, puedes establecer un diseño único para la página de inicio, otro para las páginas de productos y otro para el panel de administración.

Ejemplo:

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <main>
          <h2>Dashboard</h2>    {children}   {' '}
    </main>
  )
}

En este ejemplo, creamos un layout específico para la ruta del dashboard (/dashboard). Este layout será utilizado por todas las páginas que estén dentro de esta ruta, como vemos en el ejemplo, las rutas de "about" y "contact" comparten el mismo layout.