基本ルーティング

src/routes/
├── +page.svelte              → /
├── +layout.svelte            → 全ページ共通レイアウト
├── about/
│   └── +page.svelte          → /about
├── blog/
│   ├── +page.svelte          → /blog
│   └── new/
│       └── +page.svelte      → /blog/new
└── contact/
    └── +page.svelte          → /contact

<!-- src/routes/about/+page.svelte -->
<script lang="ts">
  import type { PageData } from './$types';
  
  // Load関数からのデータ（もしあれば）
  let { data }: { data: PageData } = $props();
</script>

<h1>About Page</h1>
<p>This page is accessible at /about</p>

// src/routes/about/+page.ts
import type { PageLoad } from './$types';

export const load: PageLoad = async () => {
  return {
    title: 'About Us',
    description: 'Learn more about our company'
  };
};

<!-- src/routes/about/+page.svelte -->
<script lang="ts">
  import type { PageData } from './$types';
  
  let { data }: { data: PageData } = $props();
</script>

<h1>{data.title}</h1>
<p>{data.description}</p>

<!-- src/routes/+layout.svelte -->
<script lang="ts">
  import '../app.css';
  import Header from '$lib/components/Header.svelte';
  import Footer from '$lib/components/Footer.svelte';
  import type { Snippet } from 'svelte';
  
  let { children }: { children?: Snippet } = $props();
</script>

<div class="app">
  <Header />
  
  <main>
    <!-- 子ページがここにレンダリングされる -->
    {@render children?.()}
  </main>
  
  <Footer />
</div>

<style>
  .app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  
  main {
    flex: 1;
    padding: 2rem;
  }
</style>

<!-- src/routes/blog/+layout.svelte -->
<script lang="ts">
  import BlogSidebar from '$lib/components/BlogSidebar.svelte';
  import type { Snippet } from 'svelte';
  
  let { children }: { children?: Snippet } = $props();
</script>

<div class="blog-layout">
  <aside>
    <BlogSidebar />
  </aside>
  
  <article>
    <!-- blog配下のページがここに表示される -->
    {@render children?.()}
  </article>
</div>

<style>
  .blog-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 2rem;
  }
</style>

// src/routes/+layout.ts
import type { LayoutLoad } from './$types';

export const load: LayoutLoad = async ({ fetch }) => {
  // 全ページで使用する共通データ
  const navigation = await fetch('/api/navigation').then(r => r.json());
  
  return {
    navigation
  };
};

<!-- src/routes/+error.svelte -->
<script lang="ts">
  import { page } from '$app/stores';
</script>

<div class="error-page">
  <h1>{$page.status}</h1>
  <p>{$page.error?.message || 'An error occurred'}</p>
  
  {#if $page.status === 404}
    <p>ページが見つかりませんでした。</p>
    <a href="/">ホームに戻る</a>
  {:else if $page.status === 500}
    <p>サーバーエラーが発生しました。</p>
    <p>しばらく時間をおいてから再度お試しください。</p>
  {/if}
</div>

<style>
  .error-page {
    text-align: center;
    padding: 4rem 2rem;
  }
  
  h1 {
    font-size: 4rem;
    margin-bottom: 1rem;
  }
</style>

// src/routes/posts/[id]/+page.ts
import { error } from '@sveltejs/kit';
import type { PageLoad } from './$types';

export const load: PageLoad = async ({ params, fetch }) => {
  const response = await fetch(`/api/posts/${params.id}`);
  
  if (!response.ok) {
    if (response.status === 404) {
      throw error(404, '記事が見つかりません');
    }
    throw error(500, 'サーバーエラーが発生しました');
  }
  
  return {
    post: await response.json()
  };
};

static/
├── favicon.png         → /favicon.png
├── robots.txt          → /robots.txt
└── images/
    └── logo.svg        → /images/logo.svg

<img src="/images/logo.svg" alt="Logo" />
<link rel="icon" href="/favicon.png" />

<script lang="ts">
  import { page } from '$app/stores';
  
  // 現在のパスを取得
  let currentPath = $derived($page.url.pathname);
</script>

<nav>
  <a href="/" class:active={currentPath === '/'}>Home</a>
  <a href="/about" class:active={currentPath === '/about'}>About</a>
  <a href="/blog" class:active={currentPath.startsWith('/blog')}>Blog</a>
</nav>

<style>
  a {
    padding: 0.5rem 1rem;
    text-decoration: none;
  }
  
  a.active {
    font-weight: bold;
    border-bottom: 2px solid currentColor;
  }
</style>

<!-- ホバー時に事前読み込み -->
<a href="/about" data-sveltekit-preload-data="hover">About</a>

<!-- 表示されたら即座に読み込み -->
<a href="/blog" data-sveltekit-preload-data="eager">Blog</a>

<!-- タップ時に読み込み（モバイル向け） -->
<a href="/contact" data-sveltekit-preload-data="tap">Contact</a>

// src/routes/about/+page.ts
export const prerender = true;         // ビルド時に静的生成
export const ssr = true;                // SSR有効（デフォルト）
export const csr = true;                // CSR有効（デフォルト）
export const trailingSlash = 'always'; // URLの末尾に/を付ける

src/routes/
├── +layout.svelte           # サイト全体のレイアウト
├── +page.svelte             # ホームページ
├── +error.svelte            # エラーページ
├── about/
│   └── +page.svelte         # About ページ
└── blog/
    ├── +layout.svelte       # ブログセクションのレイアウト
    ├── +page.svelte         # ブログ一覧
    ├── +page.ts             # ブログ記事の取得
    └── [slug]/
        ├── +page.svelte     # 個別記事ページ
        └── +page.ts         # 記事データの取得

// src/routes/blog/+page.ts
import type { PageLoad } from './$types';

interface BlogPost {
  slug: string;
  title: string;
  excerpt: string;
  date: string;
}

export const load: PageLoad = async ({ fetch }) => {
  const response = await fetch('/api/posts');
  const posts: BlogPost[] = await response.json();
  
  return {
    posts
  };
};

<!-- src/routes/blog/+page.svelte -->
<script lang="ts">
  import type { PageData } from './$types';
  
  let { data }: { data: PageData } = $props();
</script>

<h1>Blog Posts</h1>

<div class="posts">
  {#each data.posts as post}
    <article>
      <h2>
        <a href="/blog/{post.slug}">{post.title}</a>
      </h2>
      <time>{new Date(post.date).toLocaleDateString('ja-JP')}</time>
      <p>{post.excerpt}</p>
    </article>
  {/each}
</div>