高度なルーティング

src/routes/
├── (app)/                    # URLパスには含まれない
│   ├── +layout.svelte        # アプリケーションレイアウト
│   ├── dashboard/            # /dashboard
│   │   └── +page.svelte
│   └── settings/             # /settings
│       └── +page.svelte
├── (marketing)/              # URLパスには含まれない
│   ├── +layout.svelte        # マーケティングサイトレイアウト
│   ├── +page.svelte          # / (ホームページ)
│   └── pricing/              # /pricing
│       └── +page.svelte
└── (auth)/                   # URLパスには含まれない
    ├── +layout.svelte        # 認証用レイアウト
    ├── login/                # /login
    └── register/             # /register

// src/routes/(protected)/+layout.server.ts
import { redirect } from '@sveltejs/kit';
import type { LayoutServerLoad } from './$types';

export const load: LayoutServerLoad = async ({ locals, url }) => {
  const user = await locals.getUser();
  
  if (!user) {
    // 未認証の場合はログインページへリダイレクト
    throw redirect(302, `/login?redirectTo=${url.pathname}`);
  }
  
  return {
    user
  };
};

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

<div class="app-layout">
  <header>
    <nav>
      <a href="/dashboard">Dashboard</a>
      <a href="/profile">Profile</a>
      <a href="/settings">Settings</a>
    </nav>
    <UserMenu user={data.user} />
  </header>
  
  <main>
    {@render children?.()}
  </main>
</div>

// src/routes/(admin)/+layout.server.ts
import { error } from '@sveltejs/kit';
import type { LayoutServerLoad } from './$types';

export const load: LayoutServerLoad = async ({ locals }) => {
  const user = await locals.getUser();
  
  if (!user?.isAdmin) {
    throw error(403, {
      message: 'Access denied: Admin only',
      code: 'FORBIDDEN'
    });
  }
  
  return {
    user
  };
};

<script lang="ts">
  import { goto } from '$app/navigation';
  
  async function handleSubmit(event: SubmitEvent) {
    event.preventDefault();
    
    const formData = new FormData(event.target as HTMLFormElement);
    const response = await fetch('/api/posts', {
      method: 'POST',
      body: formData
    });
    
    if (response.ok) {
      const { id } = await response.json();
      
      // 作成した記事ページへ遷移
      await goto(`/posts/${id}`, {
        replaceState: false,     // 履歴を残す
        invalidateAll: true      // 全データを再取得
      });
    }
  }
</script>

<form on:submit={handleSubmit}>
  <!-- フォーム内容 -->
</form>

<script lang="ts">
  import { beforeNavigate, afterNavigate } from '$app/navigation';
  
  beforeNavigate(({ from, to, cancel }) => {
    // 未保存の変更がある場合
    if (hasUnsavedChanges && !confirm('変更を破棄しますか？')) {
      cancel();
    }
  });
  
  afterNavigate(() => {
    // ページ遷移後にスクロール位置をリセット
    window.scrollTo(0, 0);
    
    // アナリティクスにページビューを送信
    gtag('event', 'page_view');
  });
</script>

<script lang="ts">
  import { prefetch, prefetchRoutes } from '$app/navigation';
  import { onMount } from 'svelte';
  
  onMount(async () => {
    // 重要なページを事前読み込み
    await prefetchRoutes([
      '/dashboard',
      '/profile',
      '/settings'
    ]);
  });
  
  async function preloadNextPage() {
    // 次のページを事前読み込み
    await prefetch('/posts/next-article');
  }
</script>

<!-- マウスオーバーで事前読み込み -->
<a 
  href="/important-page"
  on:mouseenter={() => prefetch('/important-page')}
>
  重要なページ
</a>

// src/routes/+layout.ts（ルートレイアウト）
export const ssr = true;
export const csr = true;
export const prerender = false;

// src/routes/blog/+layout.ts（ブログセクション）
export const prerender = true;  // ブログセクション全体を静的生成

// src/routes/blog/admin/+page.ts（管理画面）
export const prerender = false; // 管理画面は動的に
export const ssr = false;       // SPAとして動作

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

// レンダリング設定
export const prerender = true;      // ビルド時に静的生成
export const ssr = true;            // SSR有効
export const csr = true;            // CSR有効

// URL設定
export const trailingSlash = 'always'; // 'never' | 'always' | 'ignore'

// プラットフォーム設定（+page.server.tsのみ）
export const config = {
  runtime: 'edge',              // エッジランタイムで実行
  regions: ['us-east-1'],       // デプロイリージョン
  isr: {                        // Incremental Static Regeneration
    expiration: 60              // キャッシュ有効期限（秒）
  }
};

export const load: PageLoad = async () => {
  // データ取得
};

// src/routes/posts/[slug]/+page.ts
import type { PageLoad, EntryGenerator } from './$types';

// プリレンダリングするエントリを生成
export const entries: EntryGenerator = async () => {
  const posts = await getAllPosts();
  
  // 最新10件のみプリレンダリング
  return posts
    .slice(0, 10)
    .map(post => ({ slug: post.slug }));
};

export const prerender = 'auto'; // または true

export const load: PageLoad = async ({ params }) => {
  // 実装
};

<!-- src/routes/(app)/+error.svelte -->
<script lang="ts">
  import { page } from '$app/stores';
  import { dev } from '$app/environment';
  
  let error = $derived($page.error);
  let status = $derived($page.status);
</script>

{#if status === 404}
  <div class="error-404">
    <h1>ページが見つかりません</h1>
    <p>お探しのページは移動または削除された可能性があります。</p>
    <a href="/">ホームに戻る</a>
  </div>
{:else if status === 403}
  <div class="error-403">
    <h1>アクセス拒否</h1>
    <p>{error?.message || 'このページへのアクセス権限がありません。'}</p>
    <a href="/login">ログイン</a>
  </div>
{:else}
  <div class="error-500">
    <h1>サーバーエラー</h1>
    <p>申し訳ございません。エラーが発生しました。</p>
    {#if dev && error}
      <pre>{JSON.stringify(error, null, 2)}</pre>
    {/if}
  </div>
{/if}

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

export const load: PageServerLoad = async ({ params, locals }) => {
  try {
    const post = await getPost(params.id);
    
    if (!post) {
      // 最も近い+error.svelteで処理される
      throw error(404, {
        message: 'Post not found',
        id: params.id
      });
    }
    
    if (!post.published && !locals.user?.isAdmin) {
      throw error(403, 'This post is not published');
    }
    
    return { post };
  } catch (e) {
    // データベースエラーなど
    console.error('Failed to load post:', e);
    
    throw error(500, {
      message: 'Failed to load post',
      code: 'DB_ERROR'
    });
  }
};

// src/routes/profile/+page.server.ts
import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async ({ locals }) => {
  const user = await locals.getUser();
  
  return {
    component: user ? 'authenticated' : 'guest',
    user
  };
};

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

{#if data.component === 'authenticated'}
  <UserProfile user={data.user} />
{:else}
  <GuestProfile />
{/if}

<!-- プリロード戦略 -->
<nav>
  <!-- 表示時に即座にプリロード -->
  <a href="/critical" data-sveltekit-preload-data="eager">
    重要なページ
  </a>
  
  <!-- ホバー時にプリロード（デフォルト） -->
  <a href="/normal" data-sveltekit-preload-data="hover">
    通常のページ
  </a>
  
  <!-- タップ時にプリロード（モバイル向け） -->
  <a href="/mobile" data-sveltekit-preload-data="tap">
    モバイル向けページ
  </a>
  
  <!-- プリロードしない -->
  <a href="/heavy" data-sveltekit-preload-data="off">
    重いページ
  </a>
</nav>

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

export const load: PageLoad = async () => {
  // 動的インポートで必要な時だけロード
  const { HeavyComponent } = await import('$lib/components/HeavyComponent.svelte');
  
  return {
    component: HeavyComponent
  };
};

src/routes/
└── [tenant]/
    ├── +layout.server.ts    # テナント検証
    ├── +layout.svelte       # テナント別レイアウト
    ├── (public)/
    │   ├── +page.svelte     # /{tenant}
    │   └── about/
    │       └── +page.svelte # /{tenant}/about
    └── (app)/
        ├── +layout.server.ts # 認証チェック
        ├── dashboard/
        │   └── +page.svelte  # /{tenant}/dashboard
        └── settings/
            └── +page.svelte  # /{tenant}/settings

// src/routes/[tenant]/+layout.server.ts
import { error } from '@sveltejs/kit';
import type { LayoutServerLoad } from './$types';

export const load: LayoutServerLoad = async ({ params, locals }) => {
  const tenant = await getTenantBySlug(params.tenant);
  
  if (!tenant) {
    throw error(404, 'Tenant not found');
  }
  
  // テナント情報を設定
  locals.tenant = tenant;
  
  return {
    tenant,
    theme: tenant.theme,
    config: tenant.config
  };
};