特殊ファイルシステム

<script lang="ts">
  import type { PageData, ActionData } from './$types';
  
  let { data, form }: { data: PageData; form: ActionData } = $props();
</script>

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

{#if form?.error}
  <p class="error">{form.error}</p>
{/if}

<form method="POST">
  <input name="title" value={form?.title ?? ''} />
  <button>送信</button>
</form>

import type { PageLoad } from './$types';

export const load: PageLoad = async ({ params, url, fetch, parent }) => {
  const parentData = await parent();
  const response = await fetch(`/api/items/${params.id}`);
  const item = await response.json();
  
  return {
    ...parentData,
    item,
    query: url.searchParams.get('q')
  };
};

// ページ設定
export const prerender = false; // SSRを使用
export const ssr = true;
export const csr = true;

import type { PageServerLoad, Actions } from './$types';
import { fail, redirect } from '@sveltejs/kit';

// サーバー専用のデータ取得
export const load: PageServerLoad = async ({ params, locals }) => {
  const post = await db.post.findUnique({
    where: { id: params.id }
  });
  
  if (!post) throw error(404, 'Not found');
  
  return {
    post,
    canEdit: locals.user?.id === post.authorId
  };
};

// フォームActions
export const actions: Actions = {
  default: async ({ request, locals }) => {
    const data = await request.formData();
    const title = data.get('title');
    
    if (!title) {
      return fail(400, { 
        title,
        error: 'タイトルは必須です' 
      });
    }
    
    await db.post.create({
      data: { title, authorId: locals.user.id }
    });
    
    throw redirect(303, '/posts');
  }
};

<script lang="ts">
  import type { LayoutData } from './$types';
  import type { Snippet } from 'svelte';
  
  let { data, children }: { data: LayoutData; children?: Snippet } = $props();
</script>

<header>
  <nav>{data.navigation}</nav>
  {#if data.user}
    <span>Welcome, {data.user.name}</span>
  {/if}
</header>

<main>
  {@render children?.()}  <!-- 子ページがここに挿入される -->
</main>

<footer>© 2024</footer>

import type { LayoutLoad } from './$types';

export const load: LayoutLoad = async ({ fetch }) => {
  const [config, navigation] = await Promise.all([
    fetch('/api/config').then(r => r.json()),
    fetch('/api/navigation').then(r => r.json())
  ]);
  
  return { config, navigation };
};

// レイアウトグループの設定
export const prerender = false;
export const trailingSlash = 'always';

import type { LayoutServerLoad } from './$types';
import { redirect } from '@sveltejs/kit';

export const load: LayoutServerLoad = async ({ cookies, url }) => {
  const token = cookies.get('session');
  
  // 認証が必要なページグループ
  if (url.pathname.startsWith('/admin')) {
    if (!token) {
      throw redirect(303, `/login?redirect=${url.pathname}`);
    }
    
    const user = await validateToken(token);
    if (user.role !== 'admin') {
      throw error(403, 'Admin access required');
    }
    
    return { user };
  }
  
  return {};
};

import { json } from '@sveltejs/kit';
import type { RequestHandler } from './$types';

export const GET: RequestHandler = async ({ url }) => {
  const limit = Number(url.searchParams.get('limit')) || 10;
  const posts = await db.post.findMany({ take: limit });
  return json(posts);
};

export const POST: RequestHandler = async ({ request, locals }) => {
  if (!locals.user) {
    throw error(401, 'Authentication required');
  }
  
  const data = await request.json();
  const post = await db.post.create({ data });
  
  return json(post, { status: 201 });
};

<script lang="ts">
  import { page } from '$app/stores';
</script>

<h1>{$page.status}</h1>
<p>{$page.error?.message}</p>

{#if $page.status === 404}
  <p>ページが見つかりません</p>
  <a href="/">ホームに戻る</a>
{:else if $page.status === 500}
  <p>サーバーエラーが発生しました</p>
{/if}