sveltekit-structure

SvelteKit uses file-system-based routing where +page.svelte files define route content and +layout.svelte files wrap multiple routes with shared UI. Place +page.svelte in a directory to create a route, and +layout.svelte at any level to apply a layout to that directory and its children. Nested directories create nested routes with cascading layouts.

Create +layout.svelte files at different directory levels in your routes folder. A root +layout.svelte applies to all pages; child layouts apply only to their directory and descendants. Use `<slot />` in each layout to render child content, enabling shared headers, navigation, or authentication boundaries across specific route groups.

Place +error.svelte files at any route level to create error boundaries. Errors thrown in that route or its children are caught and rendered by the nearest +error.svelte. Use multiple +error.svelte files at different hierarchy levels to handle errors contextually and display appropriate messages for different HTTP status codes.

+page.svelte files render UI components on the client and server during hydration and SSR. +server.ts files handle API endpoints and server-only logic, returning JSON or other data without rendering HTML. Use +server.ts for data loading, form handling, and backend operations; use +page.svelte for UI rendering.

Route groups use parentheses syntax—e.g., (auth) or (dashboard)—to organize routes without affecting URL paths. Group directories can have their own +layout.svelte files to apply layouts only to routes within that group. This lets you organize authentication boundaries, different UI structures, or logical sections without changing your public URL structure.

Use dynamic parameters (like [id].svelte) to create parameterized routes that render different content per URL. Use +server.ts to fetch or process data server-side during SSR, reducing client-side hydration work. Combine them to build scalable apps where the server renders HTML with data pre-fetched, and the client hydrates efficiently.