Creando un Layout en TypeScript con Next.js

Crear Layouts en la fase de diseño es una herramienta indispensable que nos va a ahorrar mucho tiempo en la creación de nuestras soluciones web y que, usando Next.js, se convierte en una cuestión sencilla, rápida y tremendamente útil.

Layout: definición.

Primero que nada voy a intentar definir lo que entiendo por Layout en este caso.

Al diseñar una web nos encontramos, comunmente, con partes de la misma que se repiten en todas nuestras páginas: cabeceras, pies, sidebars, etc.

Este tipo de elementos que se repiten constantemente pueden ser definidos una única vez y agregados a estas páginas en su construcción.

Ventajas

Las más evidentes son:

  • Eficiencia: Los tenemos que definir una única vez. Esto nos ahorra trabajo al no tener que estar copiando y pegando en todas nuestras páginas todos los elementos que conforman parte fija de nuestro diseño.
  • Fácil actualización: Al ser un único componente definido como Layout, todas las modificaciones que realicemos en el mismo se verán reflejadas en todas nuestras páginas.

Definiendo un Layout

Al tratarse de un componente, crearemos una carpeta Layouts dentro de la carpeta Components:

image.png

La definición del Layout es muy básica: se trata de Functional Component que envolverá sus hijos en todo lo que nosotros queramos.

Ese envoltorio será nuestro Layout y podremos definirlo como queramos:

import Head from "next/head";
import { FC, ReactNode } from "react";
import styles from "../../styles/layouts/MainLayout.module.css";
import NavBar from '../ui/NavBar';


type Props = {
  children: ReactNode;
  title?: String;
}

const MainLayout: FC<Props> = ({ children, title }) => {
  return (
    <>
      <Head>
        <title>{title}</title>
      </Head>
      <NavBar />
      <main>
        {children}
      </main>
    </>
  )
}

export default MainLayout

Modificar el <header>

Una de las muchas interesantes características que tiene Next.js es su componente Head. Este nos permite sobreescribir funcionalidades del header de HTML. En el ejemplo podéis ver como utilizamos el título como parámetro del componente:

const MainLayout: FC<Props> = ({ children, title }) => {

Para luego utilizarlo en la definción del Head de NextJS:

<Head>
    <title>{title}</title>
</Head>

Utilizar múltiples Layouts

Otra de las ventajas de emplear esta solución es la posibilidad de utilizar múltiples layouts de forma dinámica en función de las necesidades de nuestra aplicación. Esto nos permite gestionar de forma controlada qué van a ver nuestros usuarios dependiendo de su interacción con nuestra interfaz.

Para ello bastará con renderizar condicionalmente uno u otro layout utilizando los estados de React.

Más allá de lo evidente: implementar diseños claro y oscuro, las posibilidades son ilimitadas y se nos abre un abanico de opciones muy interesantes:

  • Entorno personalizado en función del tipo de usuario.
  • Diseño adpatado
  • Paneles de administración
  • etc.

Conclusión

Pese a que no son indispensables para el desarrollo de una aplicación, el uso de layouts supone una ventaja importante a tener en cuenta en el proceso y nos va a permitir ahorrar tiempo y esfuerzo para poder dedicarlo a otras áreas del desarrollo.