Implementación de Layouts en Next.js: Globales y Locales

Contenido del curso

Conceptos básicos de Next.js 14

Manejo de estilos y estáticos en Next.js 14

Data Fetching en Next.js

Next.js Avanzado

Autenticación y autorización

Inteligencia Artificial

Performance

Frontend Ops

Next.js es parte de tu nuevo stack

57
Next.js: Backend y Frontend con React Server Components
01:25 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:006:57

Implementación de Layouts en Next.js: Globales y Locales

Curso de Next.js 14

Clase 5 de 57

Clase 5 / 57

Recursos

¿Qué es un layout en Next.js y cómo identificarlo?

Un aspecto esencial en el desarrollo web es la capacidad de estructurar y organizar las aplicaciones de manera eficiente. El concepto de "layout" en Next.js nos permite precisamente esto, al proporcionar elementos de diseño que permanecen constantes en una aplicación, independientemente de la página que se esté visualizando. Imagina elementos como el encabezado, el pie de página o una barra de navegación específica. Estos son comúnmente parte de un layout, algo que ya has visto en plataformas como Amazon. Aquí, cada página podría variar su contenido, pero elementos clave como la barra de navegación o el header permanecen constantes, ofreciendo una experiencia consistente al usuario.

¿Cómo se implementan los layouts en Next.js?

En Next.js, la implementación de layouts se vuelve cada vez más intuitiva gracias a dos tipos principales de layouts que pueden ser utilizados: el layout global y el layout local.

¿Qué es un layout global o root layout?

El layout global, conocido también como "root layout", es el contenedor principal de toda la aplicación. Es el lugar perfecto para definir estilos globales, importar fuentes y modificar los metadatos universales de la página. Esto es fundamental, ya que un cambio aquí se reflejará en toda la aplicación. Para implementar cambios u elementos de manera uniforme, como un título general para tu aplicación, este es el lugar ideal para hacerlo.

Creación del root layout:

// layout.tsx
export default function RootLayout({ children }) {
  return (
    <>
      <header>
        <nav>
          <ul>
            <li>Home</li>
            <li>Store</li>
          </ul>
        </nav>
      </header>
      {children}
    </>
  );
}

En este ejemplo, un header y una barra de navegación se agregan al layout global, garantizando que esos elementos estén presentes en toda la aplicación.

¿Cómo se crea un layout local?

El layout local es donde las cosas se ponen interesantemente específicas. Este tipo de layout afecta solo a segmentos particulares de rutas dentro de la aplicación. Perfecto para cuando manejes páginas con múltiples subcategorías o quieras personalizar ciertas secciones sin afectar otras. Por ejemplo, en una página de tienda que contiene categorías dinámicas como "tecnología" o "casa", se puede crear un layout que afecte solo a esas secciones.

Ejemplo de un layout local en una categoría:

// category/layout.tsx
export default function CategoryLayout({ children }) {
  return (
    <main>
      <p>Navegación de las categorías</p>
      {children}
    </main>
  );
}

En este código, un main envuelve el contenido dinámico, permitiendo tener una navegación específica solo para las categorías.

¿Cuáles son las mejores prácticas al usar layouts en Next.js?

Los layouts en Next.js funcionan de manera jerárquica y se aplican dependiendo de cómo están anidados en tus carpetas de proyecto. Aquí hay algunos consejos:

Uso jerárquico: Los layouts se aplican de manera descendente. Un layout global siempre tendrá prioridad sobre los layouts locales.
Especificidad: Para aplicar layouts específicos a subcategorías, deben estar ubicados al nivel adecuado correspondiente a su segmento de ruta.
Modularidad y consistencia: Usar layouts ayuda a mantener coherencia en el diseño y facilita la reutilización de componentes de diseño.

Next.js ofrece una flexibilidad fenomenal con la gestión de layouts, permitiéndote estructurar tu aplicación de manera eficiente y organizada mientras brindas una experiencia de usuario consistente y profesional. ¡Sigue explorando y perfeccionando tu habilidad en la programación con Next.js!

Xavier Flores

Hace 3 años

CLASE5 Resumen 28/02/2024

Los archivos especiales layout, pages y templates permiten crear un UI para una ruta.

LAYOUT

Un Layout es un UI que es compartido entre multiples rutas, pueden preserva su estado, seguir siendo interactivos y no se vuelven a re-renderizar. Recordar que cuando usamos layout es obligatorio aceptar la prop "children" para que pueda ser compartida con otros componentes.

Por ejemplo, el layout sera compartido con /dashboard y /dashboard/settings pages. !alt layout

ROOT LAYOUT

Es todo aquello que siempre va a estar presente en la aplicacion y sin importar que cambies de pagina se va a visualizar como por ejemplo el header, el footer, alguna barra de navegación específica y suele haber diferentes tipos de layout para cada parte de la aplicación. Por lo general se ubica en el folder /app y solo él puede contener etiquetas <html> y <body>. No es posible pasar datos entre un layout padre y sus hijos. Sin embargo, puedes obtener los mismos datos en una ruta más de una vez, y React deducirá automáticamente las solicitudes sin afectar al rendimiento.

LOCAL LAYOUT o NESTING LAYOUTS

Este puede ir ubicado dentro de cada segmento de ruta que vayamos anidando reflejando un comportamiento del root layout pero respetando los niveles jerarquicos de los layouts superiores.

PAGES

Una "PAGE.TSX" es un UI que es unico en una ruta y puede existir en cada folder, ademas pueden hacer fetch a la data del lado del servidor dado que por defecto son server components.

TEMPLATES

Muy similar a los layouts en la forma que envuelven a los layout hijos o las pages.

A diferencia de los layouts que persiten en las rutas y mantienen estados, los templates crean una nueva instancia para cada uno de sus hijos en la navegación, en otras palabras cuando navegas entre templates se monta la nueva instancia del componente, se recrea los elementos del DOM, no guarda estados y se vuelven a sincronizar sus efectos.

- Casos de uso:
    - Caracteristicas que usen useEffect (logging pages) y useState (pagina de formularios de comentarios)

El Template component debe incluir el children prop.

<Layout>
  {/* Note that the template is given a unique key. */}
  <Template key={routeParam}>{children}</Template>
</Layout>

METADATA

En el app directory, existe el archivo "page" en el que puedes modificar elementos del tag "head" como title y meta usando los metadata apis.

La metada puede ser definida exportando el objeto "metadata" o la funcion generateMetadata en un archivo layout o page.

Comentarios (11)11 comentarios

Joseph Humberto Cueva

Se puede personalizar aun mas el titulo de la pagina.

Al definir el titulos en el root del layout podemos agregar un titulo por defecto y una plantilla de titulo de la siguiente forma:

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: {
    template: "%s | Future world",
    default: "Future world",
  },
  description: "Generated by create next app",
};
```Ahora si en la pagina dinamica de **Category** agregamos el titulo de la pagina:

```js
import type { Metadata } from "next";
export const metadata: Metadata = {
  title: "Categorias",
};
``` El titulo de la pagina se mostrara asi **Categorias | Future world.** Y asi para cada pagina en la que agreuemos un titulo en especifico.

Si no agregamos un titulo se mostrara el titulo por defecto: **Future world**

Renzo Mayer

Que bien, solo agregar que este es recomendado para la pagina de store que no es dinamica.

Para la pagina de categorias dinamicas recomiendo:

import type { Metadata, ResolvingMetadata } from "next";

interface CategoryProps {
    params: {
        category: string;
        };
}

export async function generateMetadata(
    { params }: CategoryProps,
    parent: ResolvingMetadata
  ): Promise<Metadata> {
    const { category } = params;
    // Human friendly slug
    const title = category
      .split("-")
      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
      .join(" ");
   
    return {
      title: title,
    }
  }

Mónica Pamela Arroyo Montiel

Llevo ya un año usando Page Router, ¡Siento que me va a costar adaptarme a esto de App Router!

pero este se siente demasiado ameno

Johann Camilo Belosareos Colmenares

¿Qué es un Layout?

Es todo elemento que siempre va a estar presente en mi aplicación como un wrapper, sin importar que cambie de página se va a visualizar (ej: header, footer, sidemenu, etc)

los layouts siempre resuelven de manera jerarquica

Existen 2 tipos de Layout:

LAYOUT GLOBAL: ROOT LAYOUT, envuelve a toda la aplicación

LAYOUT LOCAL: Por rutas del fileSystem, envuelve sólo a su ruta

Bethsy Falcon

¿Como hago si necesito usar Content? con Page Router yo envolvía lo que tenia en el archivo _app para poder manejar el content en cualquier lugar de la app, pero en este caso ya no tengo ese archivo donde lo haría?

Gracias, pero mas adelante en el curso implementan una libreria llamada Zustand que aclara de alguna manera mi duda.

Andrés Esteban Rodríguez Jiménez

How to create a Layout in Next.js

In the realm of web development, a layout encompasses everything that repeats across your application. Common elements within a layout include the navbar, an aside, a footer, and so forth. Layouts can take various forms, ranging from one for the entire application, to specific sections or even individual pages.

Now, let’s delve into how the default layout actually operates:

📂**/app/layout.tsx**

import type { Metadata } from 'next' import { Inter } from 'next/font/google' import './globals.css'

// Establishing the font const inter = Inter({ subsets: ['latin'] })

// Changing metadata information export const metadata: Metadata = { title: 'Create Next App', description: 'Generated by create next app', }

// The layout file itself export default function RootLayout({ children, }: { children: React.ReactNode }) {

return ( <html lang="en"> <body className={inter.className}> <> {/* The <h3> will appear on the whole app */} <h2 className='text-purple-600 text-xl font-semibold'>My app</h3> {children} </> </body> </html> ) }

Note that the layout receives a children parameter. This children is, in fact, the page.tsx file within the folder where we are working.

-- **app/**📂 -- layout.tsx <- Acts as the father of page.tsx -- page.tsx <- Acts as the child of layout.tsx -- **app/example**📂 -- page.tsx <- Still actting as the child of layout.tsx -- **app/example2**📂 -- layout.tsx <- It only alters the page.tsx within this folder -- page.tsx

It’s essential to understand that the page.tsx in the app folder doesn’t alter the page.tsx in the app/example folder in any way. Only the layout.tsx holds this role.

This structure ensures a clean separation of concerns, allowing for a hierarchical relationship where the layout serves as the overarching structure, and individual pages or sections can customize their content without affecting the layout of the entire application.

Gilberto Espinoza Maciel

Hace 24 días

Explica porque se utliza REACT. Como funciona ReactNode en este componente?

React se usa para construir interfaces modulares mediante componentes reutilizables y un DOM virtual eficiente. En un layout de Next.js, ReactNode tipa el parámetro children, asegurando que cualquier elemento hijo —ya sea HTML, texto u otros componentes— pueda renderizarse dentro de la estructura envolvente del layout.

Nayeli Melissa Ramírez Paredes

Hace 2 años

Hola!, cómo se llama la extensión que usa para completar el código? escuché que dijo copilot, pero hay varios, so?

Juan Camilo Noreña López

Hola! La extensión es github copilot

Octavio Villavicencio Cruz

Se puede personalizar aun mas el titulo de la pagina. Al definir el titulos en el root del layout podemos agregar un titulo por defecto y una plantilla de titulo de la siguiente forma: jsx import type { Metadata } from "next"; export const metadata: Metadata = { title: { template: "%s | Future world", default: "Future world", }, description: "Generated by create next app", }; Ahora si en la pagina dinamica de **Category** agregamos el titulo de la pagina: jsx import type { Metadata } from "next"; export const metadata: Metadata = { title: "Categorias", }; El titulo de la pagina se mostrara asi **Categorias | Future world.** Y asi para cada pagina en la que agreuemos un titulo en especifico. Si no agregamos un titulo se mostrara el titulo por defecto: **Future world** Para la pagina de categorias dinamicas recomiendo: import type { Metadata, ResolvingMetadata } from "next"; interface CategoryProps { params: { category: string; }; } export async function generateMetadata( { params }: CategoryProps, parent: ResolvingMetadata ): Promise\<Metadata> { const { category } = params; // Human friendly slug const title = category .split("-") .map((word) => word.charAt(0).toUpperCase() + word.slice(1)) .join(" "); return { title: title, } }

Santiago Rodriguez

Interesante, no sabía que no es necesario importar el Layout, ahora entiendo que solo basta con crear el Layout.tsx en la anidación del directorio donde queremos que este.

Welinton Elvis Suarez Galvis

Buenisimo y muy bien explicado el Layout

Conceptos básicos de Next.js 14

Optimización Web con Next.js: Velocidad y Rendimiento Mejorados

Creación de Proyectos Next.js con TypeScript y App Router

Creación de Tienda Online con NextGIS y Shopify

Rutas Estáticas y Dinámicas en Next.js: Creación y Uso Práctico

Implementación de Layouts en Next.js: Globales y Locales

Navegación Optimizada con Next.js Usando el Componente Link

Rutas Dinámicas y Parámetros en Next.js: Implementación Práctica

Uso de React Server Components en Next.js: Cliente vs Servidor

Arquitectura de Componentes para Landing Page en Next.js

Manejo de estilos y estáticos en Next.js 14

Implementación de CSS Modules en Next.js para Estilizar Componentes

Instalación y Configuración de Sass en Next.js

Estilos Globales con SASS para Temas Oscuros en Aplicaciones Web

Agregar Archivos Estáticos en Next.js: Imágenes y Recursos Internos

Optimización de Imágenes con Next.js: Uso de Next.Image

Optimización y Responsividad con NextImage en Next.js

Optimización de Fuentes de Google en Next.js con Roboto

Estilos Dinámicos en React con Classnames y useState

Data Fetching en Next.js

Creación de Tienda en Shopify para Desarrollo con Next.js

Creación y uso de variables de entorno en Next.js

Consumo de APIs con Shopify y React Server Components

Implementación de Loader en Next.js para Carga de Productos

Route Grouping en Next.js sin crear segmentos

error.tsx para manejar errores en Next.js

Next.js Avanzado

Manejo de Errores y Páginas 404 en Next.js

React Server Components en Next.js: Renderizado y Optimización

Diferencias entre archivos Template y Layout en Next.js

Arquitectura Escalable para Aplicaciones de Software

Creación de APIs con Next.js y Road Handlers

Configuración y Creación de Colecciones en Shopify

Patrones de Fetching en Next.js: Secuencial y Paralelo

Filtrar productos por colección en Shopify

params y searchParams en Next.js

Implementación de la Vista de Producto en TypeScript y React

Gestión de Caché en Next.js: Tipos y Recomendaciones Prácticas

Revalidación de Caché en Next.js: Endpoints por Tag y Path

Redirección en Next.js: Server y Client Components

Creación de un Componente React para Sanitizar HTML

SEO Dinámico y Estático en Next.js para Mejorar Posicionamiento Web

Autenticación y autorización

Implementación de API GraphQL en Shopify para Autenticación Segura

Uso de Server Actions en Next.js para Formularios React

Implementación de Signup con GraphQL y Shopify

Implementación de Cookies de Acceso en Shopify con Next.js

Implementación de Flujo de Login con Tokens y Cookies

Validación de Access Tokens en Next.js con GraphQL y Cookies

Implementación de Carrito de Compras con React Icons

Manejo de estado global con Sustant en Next.js 13

Implementación de Carrito de Compras en JavaScript y CSS

Checkout de Shopify sin errores de hidratación

Implementación de Middlewares en Next.js para Control de Acceso

Inteligencia Artificial

Implementación de Chatbots con Next.js y Vercel AI SDK

Creación de un Chatbot de Ventas con Personalidad y Contexto

Performance

Implementación de Parallel Routing en Next.js para Cargas Independientes

Analiza tu bundle en Next.js con Bundle Analyzer

Frontend Ops

"Implementación del Edge Runtime en Next.js"

Despliegue de Aplicaciones NxJS en Vercel

Arquitectura de Proyectos Next.js para Entornos Empresariales

Next.js es parte de tu nuevo stack

Next.js: Backend y Frontend con React Server Components

Implementación de Layouts en Next.js: Globales y Locales