SvelteKit turns your file system into routes. Every +page.svelte file becomes a page. This lesson covers file-based routing, layouts, nested routes, and loading data.
src/routes/
├── +page.svelte → /
├── about/
│ └── +page.svelte → /about
├── blog/
│ ├── +page.svelte → /blog
│ └── [slug]/
│ └── +page.svelte → /blog/:slug
└── +layout.svelte → wraps all pages
// This runs on the server before the page renders
export async function load({ fetch }) {
const res = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=10');
const posts = await res.json();
return { posts }; // passed to +page.svelte as `data`
}
Blog
{#each data.posts as post}
{post.title}
{/each}export async function load({ params, fetch }) {
const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.slug}`);
if (!res.ok) throw error(404, 'Post not found');
const post = await res.json();
return { post };
}load function in +page.js runs on the server for SSR and on the client for client-side navigation. You get the best of both worlds — fast initial load and instant subsequent navigation./blog/+page.svelte with a load() function that fetches posts from JSONPlaceholder./blog/[slug]/+page.svelte with a load function that fetches a single post by ID.$page.url.pathname.+page.svelte files map to routes based on their directory location.+layout.svelte wraps all child routes — perfect for nav, headers, footers.+page.js exports a load() function that fetches data before the page renders.[brackets] in folder names. Access them via params.slug.