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 toda página naquela rota herda automaticamente o wrapper. Isso significa que você escreve seu cabeçalho, rodapé ou navegação uma única vez, e o SvelteKit coloca automaticamente 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) funciona 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 exclusivo de cada página inserido onde especificarmos.

Vamos ver o que há 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

Toda página agora tem "CONTENT 1" acima dela 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 envolve automaticamente todas as páginas com ele.

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

Como o Envolvimento por Layout Funciona

Pense no layout como uma moldura ao redor de um quadro. O layout é a moldura, a página é o quadro:

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

A diretiva {@render children()} (abordaremos com mais detalhes na próxima lição) marca onde vai o conteúdo da página proveniente da prop children. Todo o restante adicionado neste arquivo fica ao redor dele.

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 diz {@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 acontece — 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.

Limpar a Navegação das Páginas

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

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

Depois dos 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.

então coloque sua 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>

Nada mais de código de navegação em cada página. O layout cuida disso (adicionaremos navegação de verdade em lições futuras). Cada página deve conter apenas seu conteúdo exclusivo.

Estrutura do Seu Projeto

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

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 todos os subdiretórios (services/, about/, contact/, etc.).

Mais adiante, criaremos 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 se chama 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ê deve desestruturar children de $props() para recebê-la
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 após o 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.