アプリのさまざまなルートは、多くの場合、共通のUIを共有します。各+page.svelteコンポーネントでそれを繰り返す代わりに、同じディレクトリのすべてのルートに適用される+layout.svelteコンポーネントを使用できます。

このアプリには、同じナビゲーションUIを含む2つのルート、src/routes/+page.svelteとsrc/routes/about/+page.svelteがあります。新しいファイルsrc/routes/+layout.svelteを作成しましょう...

src/routes/
├ about/
│ └ +page.svelte
├ +layout.svelte
└ +page.svelte

…そして、+page.svelteファイルから重複したコンテンツを新しい+layout.svelteファイルに移動します。{@render children()}タグは、ページコンテンツがレンダリングされる場所です。

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

<nav>
	<a href="/">home</a>
	<a href="/about">about</a>
</nav>

{@render children()}

+layout.svelteファイルは、兄弟の+page.svelte（存在する場合）を含むすべての子ルートに適用されます。レイアウトは任意の深さにネストできます。