Turn folders into routes, share UI with +layout.svelte, and nest layouts so each section keeps its own shell.
Why: you create a URL by creating a folder under src/routes and adding a +page.svelte to it. A folder only becomes a real page once that file exists.
src/routes/+page.svelte -> / src/routes/about/+page.svelte -> /about src/routes/blog/+page.svelte -> /blog src/routes/blog/authors/+page.svelte -> /blog/authors
Why: a layout is UI shared by many pages. The root layout (src/routes/+layout.svelte) wraps every page. Note: in Svelte 5 the page content arrives as a children "snippet" — you place it with {@render children()}.
<!-- src/routes/+layout.svelte -->
<script lang="ts">
let { children } = $props()
</script>
<header>My Site</header>
<main>
{@render children()}
</main>Why: add a +layout.svelte inside any folder and it wraps only that section, nested inside the root layout. Great for a sidebar or nav that should appear on every page of one area.
<!-- src/routes/blog/+layout.svelte — wraps /blog and everything under it -->
<script lang="ts">
let { children } = $props()
</script>
<nav>Blog navigation</nav>
{@render children()}Why: you do nothing to connect them — SvelteKit nests files by folder automatically. The root layout wraps the blog layout, which wraps the blog page. Here is a simple page that the layouts above will surround.
<!-- src/routes/blog/+page.svelte -> /blog -->
<script lang="ts">
let title = 'The Blog'
</script>
<h1>{title}</h1>