Skip to main content
Svelte Fundamentals
CHAPTER 14 Beginner

SvelteKit Basics

Updated: May 18, 2026
5 min read

# CHAPTER 14

SvelteKit Basics

1. Chapter Introduction

SvelteKit is to Svelte what Next.js is to React. It is Svelte's official full-stack application framework that adds file-based routing, server-side rendering (SSR), API endpoints, and deployment adapters. It is the recommended way to build production Svelte applications.

2. Learning Objectives

  • Understand SvelteKit's file-based routing system.
  • Create layouts shared across pages.
  • Use load functions for server-side data fetching.
  • Create API endpoints with +server.js.
  • Understand SSR vs CSR in SvelteKit.

3. SvelteKit File-Based Routing

text
12345678910111213 
src/routes/
├── +layout.svelte       ← Shared layout (wraps all pages)
├── +page.svelte         ← Home page (/)
├── about/
│   └── +page.svelte     ← About page (/about)
├── products/
│   ├── +page.svelte     ← Products list (/products)
│   └── [id]/
│       ├── +page.svelte      ← Product detail (/products/123)
│       └── +page.server.js   ← Server-side data loading
└── api/
    └── products/
        └── +server.js   ← REST API endpoint (/api/products)

4. Creating Pages

svelte
1234567 
<!-- src/routes/+page.svelte (Home page) -->
<script>
  export let data; // From load() function
</script>

<h1>Welcome to My SvelteKit App</h1>
<p>Total products: {data.count}</p>
javascript
123456 
// src/routes/+page.js (load function for home page)
export async function load({ fetch }) {
  const res = await fetch(&#039;/api/products&#039;);
  const products = await res.json();
  return { count: products.length };
}

5. Layouts

svelte
123456789101112131415161718 
<!-- src/routes/+layout.svelte -->
<script>
  import Navbar from &#039;$lib/Navbar.svelte';
  import Footer from &#039;$lib/Footer.svelte';
</script>

<Navbar />

<!-- All child pages render here -->
<main>
  <slot />
</main>

<Footer />

<style>
  main { max-width: 1200px; margin: 0 auto; padding: 2rem; }
</style>

6. Dynamic Routes and Server Load Functions

javascript
123456789101112 
// src/routes/products/[id]/+page.server.js
export async function load({ params, fetch }) {
  const { id } = params;
  const res = await fetch(`https://fakestoreapi.com/products/${id}`);

  if (!res.ok) {
    throw error(404, &#039;Product not found&#039;);
  }

  const product = await res.json();
  return { product };
}
svelte
123456789 
<!-- src/routes/products/[id]/+page.svelte -->
<script>
  export let data;
  const { product } = data;
</script>

<h1>{product.title}</h1>
<img src={product.image} alt={product.title} />
<p>${product.price}</p>

7. API Endpoints (+server.js)

javascript
12345678910111213141516171819 
// src/routes/api/products/+server.js
import { json } from &#039;@sveltejs/kit&#039;;

const products = [
  { id: 1, name: &#039;Laptop&#039;, price: 999 },
  { id: 2, name: &#039;Phone&#039;, price: 599 }
];

export async function GET({ url }) {
  const category = url.searchParams.get(&#039;category&#039;);
  const filtered = category ? products.filter(p => p.category === category) : products;
  return json(filtered);
}

export async function POST({ request }) {
  const newProduct = await request.json();
  products.push({ ...newProduct, id: products.length + 1 });
  return json(newProduct, { status: 201 });
}

8. Navigation in SvelteKit

svelte
1234567891011121314 
<script>
  import { goto } from &#039;$app/navigation';
  import { page } from &#039;$app/stores';

  // $page.url.pathname gives current path
</script>

<!-- Standard links work with SvelteKit -->
<a href="/">Home</a>
<a href="/products">Products</a>

<!-- Programmatic navigation -->
<button on:click={() => goto(&#039;/dashboard')}>Go to Dashboard</button>
<button on:click={() => goto(-1)}>Go Back</button>

9. Common Mistakes

  • Using fetch in onMount instead of a load function: The load function runs on the server, enabling SSR. onMount only runs in the browser. For SEO-critical pages, use load functions.
  • Forgetting the + prefix: SvelteKit uses +page.svelte, not page.svelte. The + prefix is how SvelteKit distinguishes route files from component files.

10. MCQs

Question 1

What file serves as a page in SvelteKit routing?

Question 2

What file creates a shared layout around all pages?

Question 3

Where does a child page render inside a layout?

Question 4

What file creates a REST API endpoint in SvelteKit?

Question 5

What does a load function return?

Question 6

What is the folder pattern for dynamic routes?

Question 7

What function is used for programmatic navigation in SvelteKit?

Question 8

What store provides current page info in SvelteKit?

Question 9

What is the advantage of using a +page.server.js load function over onMount for data fetching?

Question 10

What SvelteKit helper returns JSON from an API endpoint?

11. Interview Questions

  • Q: Explain SvelteKit's file-based routing system. How does it compare to manual route configuration?
  • Q: What is the difference between +page.js and +page.server.js load functions?

12. Summary

SvelteKit transforms Svelte into a complete full-stack framework. File-based routing eliminates router configuration. Layouts eliminate repetitive markup. Load functions enable SSR for faster, SEO-friendly pages. API endpoints colocate backend logic with frontend code. SvelteKit is the recommended way to build any non-trivial Svelte application.

13. Next Chapter Recommendation

Our pages need real data. In Chapter 15: API Calls and Fetching Data, we master the Fetch API, loading states, error handling, and build a complete Weather Application.

Finish this Chapter

Save your progress on your learning path and prepare for coding interview challenges.

Previous Chapter Routing in Svelte
Next Chapter API Calls and Fetching Data

Discussion

Join the discussion

Log in or create a free account to participate.

Sort: ·

Explore More

📖 Related Tutorials 6

❓ Related Quizzes 1