Um Arquivo para Governar Todos

Imagine que você está construindo uma casa. Todo cômodo precisa de paredes, piso e teto — mas cada cômodo tem móveis e decorações diferentes por dentro. No desenvolvimento web, um layout é como essas paredes, piso e teto: a estrutura que permanece igual em várias páginas.

Um arquivo de layout envolve o conteúdo da página com uma UI compartilhada. Crie-o uma vez e todas as páginas nessa rota herdam automaticamente o wrapper. Isso significa que você escreve seu cabeçalho, rodapé ou navegação uma única vez, e o SvelteKit automaticamente posiciona o conteúdo da sua página dentro dele. Sem copiar e colar, sem duplicação. Vamos criar o primeiro layout do BookIt.

O Que Você Vai Aprender

Criar um arquivo +layout.svelte
Entender o posicionamento do arquivo de layout
Ver como os layouts envolvem o conteúdo das páginas

O Layout Raiz

Quando criamos nosso app com o Svelte CLI, o processo de configuração gerou a estrutura básica do projeto para nós, incluindo um arquivo +layout.svelte junto com o +page.svelte raiz no diretório src/routes.

Para que serve esse arquivo? O arquivo de layout raiz (src/routes/+layout.svelte) serve como o wrapper principal para todas as páginas do nosso app. Qualquer conteúdo que colocarmos nesse layout aparecerá em todas as páginas, com o conteúdo único de cada página inserido onde especificarmos.

Vamos ver o que tem dentro desse arquivo e entender 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>

O Que Acabou de Acontecer?

É aqui que a mágica fica visível. Acesse qualquer página do BookIt: a página inicial (/), serviços (/services), sobre (/about) ou contato (/contact). Você verá o mesmo padrão em todas elas:

CONTENT 1

[Your page's unique content]

CONTENT 2

Todas as páginas agora têm "CONTENT 1" acima e "CONTENT 2" abaixo. A parte incrível? Não tocamos em nenhum arquivo de página. Apenas criamos um arquivo de layout, e o SvelteKit automaticamente envolve todas as páginas com ele.

Este é o poder dos layouts: escreva uma vez, aplique em todo lugar. Quando você precisar atualizar seu cabeçalho ou rodapé no futuro, mudará um único arquivo em vez de vasculhar dezenas de páginas.

Como o Encapsulamento de Layout Funciona

Pense no layout como uma moldura em torno de uma foto. O layout é a moldura, a página é a foto:

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

A diretiva {@render children()} (vamos cobrir com mais detalhes na próxima lição) marca onde vai o conteúdo da página proveniente da prop children. Tudo o mais que for adicionado neste arquivo aparece ao redor.

Veja o que acontece quando alguém acessa /about:

O SvelteKit recebe a requisição para /about
Ele carrega src/routes/about/+page.svelte
Ele envolve essa página com src/routes/+layout.svelte
Onde o layout contém {@render children()}, ele insere o conteúdo da página about
O navegador recebe uma página HTML completa com layout + página combinados

Quando o usuário navega para /contact, o mesmo processo ocorre — mas agora o conteúdo da página de contato é inserido no layout. O layout em si nunca muda; apenas o conteúdo da página dentro dele muda.

Limpando a Navegação das Páginas

Agora que temos um layout, podemos remover código duplicado das nossas páginas. Este é um dos maiores benefícios dos layouts: eliminar repetição.

Antes dos layouts: Você provavelmente tinha links de navegação copiados em todas as páginas. Se quisesse alterar a navegação, teria que atualizar cada arquivo individualmente.

Após os layouts: Coloque a navegação no layout uma vez e remova-a de todas as páginas. Agora alterar a navegação significa editar um único arquivo.

portanto, coloque seu nav no arquivo de layout assim:

<!-- 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>

Chega de código de navegação em todas as páginas. O layout cuida disso (vamos adicionar navegação de verdade em lições futuras). Cada página deve conter apenas seu conteúdo único.

A Estrutura do Seu Projeto

Veja como seu projeto está agora, com anotações mostrando o que é encapsulado:

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)

A regra principal: Um arquivo +layout.svelte envolve seu arquivo +page.svelte irmão e todos os arquivos nas pastas abaixo dele.

Como nosso layout está na raiz (src/routes/+layout.svelte), ele envolve a página raiz (src/routes/+page.svelte) e todas as páginas em cada subpasta (services/, about/, contact/, etc.).

Mais adiante, vamos criar um layout em src/routes/services/+layout.svelte que envolve apenas as páginas da seção de serviços para obter um design diferente. Isso é chamado de design aninhado e o exploraremos em lições futuras.

Erros Comuns

Esquecer de Desestruturar `children`

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

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

Criar o Arquivo no Local Errado

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

O arquivo de layout deve estar dentro de src/routes/, não ao lado dele.

Resumo

Você criou o primeiro layout do BookIt e aprendeu como o SvelteKit envolve automaticamente todas as suas páginas com uma UI compartilhada.

Principais conclusões:

+layout.svelte em src/routes/ envolve todas as páginas do seu app
O layout recebe o conteúdo da página por meio da prop children
Você precisa desestruturar children de $props() para recebê-lo
Você deve usar {@render children()} para de fato exibir o conteúdo da página
Tudo acima de {@render children()} aparece antes do conteúdo da página
Tudo abaixo aparece depois do conteúdo da página
Layouts eliminam duplicação de código entre páginas
Um único arquivo de layout pode envolver dezenas ou centenas de páginas automaticamente

O que você pode fazer agora:

Criar cabeçalhos, rodapés e navegação consistentes
Atualizar a UI compartilhada em um único lugar em vez de editar cada página
Construir estruturas de página mais complexas sem repetição

Próximos Passos

O texto de placeholder não é útil. Continue com Entendendo {@render children()} para ver exatamente como o conteúdo flui das páginas para os layouts.