Day 11: Intro to SvelteKit

Welcome to Day 11. You know Svelte (the component framework). Now meet SvelteKit (the app framework).

SvelteKit handles routing, build optimization, SSR, and more.

File System Routing

In src/routes:

• +page.svelte: Defines a UI for a route.
• +layout.svelte: Defines a wrapper for nested routes.

Structure Example

src/routes/
  +page.svelte        ->  /
  about/
    +page.svelte      ->  /about
  blog/
    [slug]/
      +page.svelte    ->  /blog/hello-world

Navigation

Use standard <a> tags! SvelteKit intercepts them for client-side navigation.

<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
</nav>

Layouts

src/routes/+layout.svelte affects every page.

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

<nav>...</nav>

<!-- The page content goes here -->
{@render children()}

<footer>...</footer>

Challenge for Day 11

1. Initialize a new SvelteKit app (npm create svelte@latest).
2. Create a route /profile.
3. Create a layout with a persistent sidebar.
4. Navigate between Home and Profile and verify the sidebar stays put (does not re-render).

Solution Hints

Just ensuring you have +layout.svelte at the root with {@render children()} is the key.

Tomorrow: Data Loading.