Lección 5 de 16 · Lectura y práctica

Layouts, templates y diseño de rutas jerárquicas

Organiza un panel de proyectos con un layout compartido, rutas anidadas y un template solo donde necesites reiniciar estado.

Del concepto a la práctica

Taller de esta lección

Un layout representa una estructura que debe persistir entre páginas hermanas; un template fuerza una nueva instancia cuando el estado local debe reiniciarse. La decisión se entiende mejor con un panel cuyo menú permanece y cuyo formulario de búsqueda se limpia solo al entrar en una sección concreta.

Ejemplo resuelto

tsx

// app/panel/layout.tsx
import Link from 'next/link';
import type { ReactNode } from 'react';
export default function Layout({ children }: { children: ReactNode }) {
  return <><nav aria-label='Panel'>
    <Link href='/panel/inventario'>Inventario</Link> |
    <Link href='/panel/ajustes'>Ajustes</Link>
  </nav><main>{children}</main></>;
}

El menú vive en el layout. Un formulario colocado en un template puede empezar vacío en cada navegación.

Para conservar el texto, coloca el buscador cliente dentro del layout compartido; para reiniciarlo al cambiar de sección, colócalo bajo app/panel/template.tsx, que retorna sus children, y ensaya navegación con Link. No atribuyas persistencia al layout si el estado todavía vive en una página desmontada. Recargar el documento es una prueba distinta y puede reiniciar ambos casos.

Pruébalo

Dibuja /panel/inventario y /panel/ajustes.
Decide qué estado debe conservarse.
Coloca navegación en el layout común.
Reinicia solo el formulario que lo necesite.

Comprueba tu resultado

Error frecuente: duplicar la navegación en cada page. Corrección: elevarla al layout y reservar el template para reinicios intencionados.

Ejercicio: escribe lápiz en el buscador de inventario, navega a ajustes y vuelve; la navegación debe persistir y el buscador debe conservar o perder el texto exactamente según tu decisión documentada.

Servidor que produce HTML y navegador que lo muestra y gestiona la interacción; claves sensibles permanecen en el servidor. — **Dónde se ejecuta cada parte**
El servidor puede obtener datos y producir el HTML inicial. El navegador muestra el resultado y ejecuta las interacciones que necesitan estado local. Mantén las claves sensibles en el servidor y define qué parte se ejecuta en cada entorno.
Ver la infografía en tamaño completo ↗

Fuentes para profundizar

Next.js: layouts y páginas ↗

Un panel con dos rutas y una decisión de estado

Supón que una aplicación tiene /panel/proyectos y /panel/ajustes. Ambas necesitan la misma navegación. Al cambiar de página, el menú debe seguir presente; un formulario de búsqueda local puede conservar o reiniciar su texto según el lugar donde lo montes. El ejercicio consiste en elegir ese comportamiento, no en añadir archivos por costumbre.

Construye el árbol antes de escribir componentes

app/
  layout.tsx
  panel/
    layout.tsx
    proyectos/page.tsx
    ajustes/page.tsx

El layout raíz contiene html y body. El layout de panel comparte el marco de esas dos páginas. Cada page.tsx aporta el contenido de su URL. No pongas otro main dentro de cada página si el layout ya lo contiene: decide una sola región principal.

// app/panel/layout.tsx
import Link from "next/link";
import type { ReactNode } from "react";

export default function PanelLayout({ children }: { children: ReactNode }) {
  return (
    <>
      <nav aria-label="Panel">
        <Link href="/panel/proyectos">Proyectos</Link>
        <Link href="/panel/ajustes">Ajustes</Link>
      </nav>
      <main>{children}</main>
    </>
  );
}

Cuándo introducir un template

Un layout se reutiliza durante la navegación. Un template recibe una nueva instancia cuando cambia su segmento y puede reiniciar el estado de sus componentes cliente. Si quieres conservar un borrador, un template que lo vuelve a montar puede hacerte perderlo. Si quieres reiniciar un formulario en un segmento concreto, prueba esa ubicación. No supongas que cualquier cambio de consulta o cualquier descendiente remonta todos los templates.

Crea las dos páginas con títulos distintos y un enlace entre ellas.
Añade un campo de prueba en un componente cliente del marco compartido. Escribe una palabra y navega.
Registra si la palabra permanece. Después prueba un template en el segmento que quieres reiniciar.
Recarga directamente cada URL: una navegación cliente correcta no demuestra que el acceso directo funcione.

Qué entregar y cómo revisarlo

Árbol de archivos y dos capturas con la URL visible.
Una nota: “Este estado se conserva aquí porque…” y “Este estado se reinicia aquí porque…”.
Un único H1 por página, enlaces navegables con teclado y una región principal coherente.
Una prueba de acceso directo, atrás/adelante y navegación entre hermanos.

El código es un ejemplo propuesto para tu proyecto; registra tus propias pruebas. La lección no afirma que ya se haya ejecutado en tu versión de Next.js.

Referencias para comprobar la implementación

Documentación consultada el 2 de octubre de 2026. Comprueba también las versiones y condiciones de tu proyecto.

Sigue con Desarrollo Web Full Stack con Next.js

Esta lección forma parte de un curso de Cursalo. Revisa su programa y elige entre la compra individual o el acceso a toda la escuela.

Ver curso y opciones de acceso Ya soy estudiante

Si ya tenías acceso a este curso, entra con tu cuenta: tus derechos y tu progreso se conservan. No necesitas comprarlo de nuevo.

← Anterior: Evaluación: Conceptos fundamentales de Next.js Siguiente: Route Groups y rutas dinámicas con parámetros →Entrar y guardar mi progreso