Un Archivo para Gobernarlos a Todos

Imagina que estás construyendo una casa. Cada habitación necesita paredes, piso y techo — pero cada habitación tiene diferentes muebles y decoraciones en su interior. En el desarrollo web, un layout es como esas paredes, piso y techo: la estructura que permanece igual en múltiples páginas.

Un archivo de layout envuelve el contenido de la página con una UI compartida. Créalo una vez, y cada página en esa ruta hereda automáticamente el envoltorio. Esto significa que escribes tu encabezado, pie de página o navegación una sola vez, y SvelteKit coloca automáticamente el contenido de tu página dentro de él. Sin copiar y pegar, sin duplicación. Construyamos el primer layout de BookIt.

Lo Que Aprenderás

Crear un archivo +layout.svelte
Comprender la ubicación de los archivos de layout
Ver cómo los layouts envuelven el contenido de las páginas

El Layout Raíz

Cuando creamos nuestra app por primera vez con Svelte CLI, el proceso de configuración generó la estructura básica del proyecto para nosotros, incluyendo un archivo +layout.svelte junto al +page.svelte raíz en el directorio src/routes.

¿Para qué sirve este archivo? El archivo de layout raíz (src/routes/+layout.svelte) funciona como el envoltorio maestro para cada página de nuestra app. Cualquier contenido que pongamos en este layout aparecerá en todas las páginas, con el contenido único de cada página insertado donde lo especifiquemos.

Veamos qué contiene este archivo y entendamos cada parte:

<!-- filename: src/routes/+layout.svelte -->
<script>
	let { children } = $props()
</script>

<div class="app">
	<!-- add this as test  -->
	<p>CONTENT 1</p>

	{@render children()}

	<!-- add this as test  -->
	<p>CONTENT 2</p>
</div>

¿Qué Acaba de Pasar?

Aquí es donde la magia se vuelve visible. Visita cualquier página de BookIt: la página de inicio (/), servicios (/services), acerca de (/about), o contacto (/contact). Verás el mismo patrón en todas y cada una de ellas:

CONTENT 1

[Your page's unique content]

CONTENT 2

Cada página ahora tiene "CONTENT 1" arriba y "CONTENT 2" abajo. ¿La parte increíble? No tocamos ningún archivo de página. Solo creamos un archivo de layout, y SvelteKit automáticamente envuelve cada página con él.

Este es el poder de los layouts: escribe una vez, aplica en todas partes. Cuando necesites actualizar tu encabezado o pie de página más adelante, cambiarás un solo archivo en lugar de buscar entre decenas de páginas.

Cómo Funciona el Envoltorio de Layout

Piensa en el layout como un marco alrededor de una imagen. El layout es el marco, la página es la imagen:

┌─────────────────────────────┐
│      LAYOUT (top)           │  ← Your header, nav, etc.
│  ┌───────────────────────┐  │
│  │                       │  │
│  │    PAGE CONTENT       │  │  ← Changes based on route
│  │                       │  │
│  └───────────────────────┘  │
│      LAYOUT (bottom)        │  ← Your footer, scripts, etc.
└─────────────────────────────┘

La directiva {@render children()} (la cubriremos con más detalle en la próxima lección) marca dónde va el contenido de la página proveniente de la prop children. Todo lo demás que se añade en este .

Esto es lo que ocurre cuando alguien visita /about:

SvelteKit recibe la solicitud de /about
Carga src/routes/about/+page.svelte
Envuelve esa página con src/routes/+layout.svelte
Donde el layout indica {@render children()}, inserta el contenido de la página about
El navegador recibe una página HTML completa con layout + página combinados

Cuando navegan a /contact, ocurre el mismo proceso — pero ahora el contenido de la página de contacto se inserta en el layout. El layout en sí nunca cambia; solo cambia el contenido de la página dentro de él.

Limpiar la Navegación de las Páginas

Ahora que tenemos un layout, podemos eliminar el código duplicado de nuestras páginas. Este es uno de los mayores beneficios de los layouts: eliminar la repetición.

Antes de los layouts: Probablemente tenías enlaces de navegación copiados en cada página. Si querías cambiar la navegación, tenías que actualizar cada archivo por separado.

Después de los layouts: Pon la navegación en el layout una vez, y elimínala de todas las páginas. Ahora cambiar la navegación implica editar un solo archivo.

así que coloca tu nav en el archivo de layout de esta manera:

<!-- filename: src/routes/+layout.svelte -->
<script>
	import favicon from '$lib/assets/favicon.svg';

	let { children } = $props();
</script>

<svelte:head>
	<link rel="icon" href={favicon} />
</svelte:head>

<nav>
	<a href="/">BookIt</a>
	<a href="/services">Services</a>
	<a href="/about">About</a>
	<a href="/contact">Contact</a>
</nav>

{@render children()}

</section>

No más código de navegación en cada página. El layout se encarga de ello (añadiremos navegación real en lecciones futuras). Cada página solo debe contener su contenido único.

La Estructura de Tu Proyecto

Así luce tu proyecto ahora, con anotaciones que muestran qué queda envuelto:

src/routes/
├── +layout.svelte    ← The master wrapper for everything below
├── +page.svelte      ← Homepage (wrapped by layout)
├── services/
│   ├── +page.svelte  ← Services list (wrapped by layout)
│   └── [slug]/
│       └── +page.svelte  ← Service detail (wrapped by layout)
├── about/
│   └── +page.svelte  ← About page (wrapped by layout)
└── contact/
    └── +page.svelte  ← Contact page (wrapped by layout)

La regla clave: Un archivo +layout.svelte envuelve su +page.svelte hermano y todos los archivos en las carpetas debajo de él.

Como nuestro layout está en la raíz (src/routes/+layout.svelte), envuelve la página raíz (src/routes/+page.svelte) y cada página en cada subcarpeta (services/, about/, contact/, etc.).

Más adelante, crearemos un layout en src/routes/services/+layout.svelte que solo envuelva las páginas de la sección de servicios para lograr un diseño diferente. Se llama diseño anidado y lo exploraremos en lecciones futuras.

Errores Comunes

Olvidar Desestructurar `children`

<!-- Missing destructuring -->
<script>
	let props = $props()
</script>

{@render children()} <!-- ERROR: 'children' is undefined -->

Crear el Archivo en la Ubicación Incorrecta

src/
├── routes/
│   └── +page.svelte
└── +layout.svelte    ← Wrong! Must be inside routes/

El archivo de layout debe estar dentro de src/routes/, no junto a él.

Resumen

Has creado el primer layout de BookIt y has aprendido cómo SvelteKit envuelve automáticamente todas tus páginas con una UI compartida.

Puntos clave:

+layout.svelte en src/routes/ envuelve todas las páginas de tu app
El layout recibe el contenido de la página a través de la prop children
Debes desestructurar children de $props() para recibirlo
Debes usar {@render children()} para mostrar efectivamente el contenido de la página
Todo lo que esté encima de {@render children()} aparece antes del contenido de la página
Todo lo que esté debajo aparece después del contenido de la página
Los layouts eliminan la duplicación de código entre páginas
Un archivo de layout puede envolver decenas o cientos de páginas automáticamente

Lo que puedes hacer ahora:

Crear encabezados, pies de página y navegación consistentes
Actualizar la UI compartida en un solo lugar en lugar de editar cada página
Construir estructuras de página más complejas sin repetición

Próximos Pasos

El texto de marcador de posición no es útil. Continúa con Entendiendo {@render children()} para ver exactamente cómo fluye el contenido desde las páginas hacia los layouts.