SvelteKit menggunakan file-based routing, artinya URL aplikasi dibentuk langsung dari struktur folder di dalam direktori src/routes. Pendekatan ini membuat routing mudah dipahami karena nama folder dan file merepresentasikan path aplikasi secara langsung.

Dalam tutorial ini, kita fokus pada kebutuhan paling dasar tetapi paling sering dipakai: membuat halaman dengan +page.svelte, menyusun nested route, membuat route dinamis dengan folder parameter seperti [slug], serta berpindah halaman menggunakan tag anchor. Contoh yang dipakai sederhana: halaman home, about, blog, dan detail artikel blog berdasarkan slug.

Catatan: Artikel ini sengaja fokus pada praktik routing dasar. Penjelasan dibuat singkat, tetapi tetap menekankan alasan cara kerja dan pola yang umum dipakai di proyek nyata.

Memahami Dasar Routing di SvelteKit

Pusat routing SvelteKit berada di folder src/routes. Setiap folder merepresentasikan segmen path, dan file khusus seperti +page.svelte menandakan bahwa folder tersebut memiliki halaman yang bisa diakses oleh browser.

Sebagai contoh, struktur berikut:

src/
└── routes/
    ├── +page.svelte
    ├── about/
    │   └── +page.svelte
    └── blog/
        ├── +page.svelte
        └── [slug]/
            └── +page.svelte

Akan menghasilkan route seperti ini:

  • / dari src/routes/+page.svelte
  • /about dari src/routes/about/+page.svelte
  • /blog dari src/routes/blog/+page.svelte
  • /blog/nama-artikel dari src/routes/blog/[slug]/+page.svelte

Konsep ini penting karena Anda tidak perlu membuat konfigurasi route secara manual seperti di beberapa framework lain. Selama struktur folder benar, SvelteKit akan mengenali route tersebut otomatis.

Membuat Halaman dengan +page.svelte

File +page.svelte adalah komponen halaman untuk route tertentu. Jika file ini ada di root src/routes, maka itu akan menjadi halaman utama atau home page.

Contoh halaman home

Buat file src/routes/+page.svelte:

<script>
  const title = 'Home';
</script>

<svelte:head>
  <title>Home - Belajar SvelteKit</title>
</svelte:head>

<h1>Home</h1>
<p>Selamat datang di aplikasi SvelteKit.</p>

<nav>
  <a href="/about">About</a> |
  <a href="/blog">Blog</a>
</nav>

Di sini, halaman root akan tampil saat pengguna membuka /. Tag <a href="..."> dipakai untuk navigasi. Dalam SvelteKit, anchor biasa tetap bekerja dengan baik untuk perpindahan antar halaman internal.

Contoh halaman about

Buat file src/routes/about/+page.svelte:

<svelte:head>
  <title>About - Belajar SvelteKit</title>
</svelte:head>

<h1>About</h1>
<p>Halaman ini berisi informasi singkat tentang aplikasi.</p>

<a href="/">Kembali ke Home</a>

Karena file berada di folder about, maka URL-nya menjadi /about. Ini adalah pola dasar yang akan dipakai berulang kali.

Nested Route: Menyusun Halaman di Dalam Folder

Nested route berarti route berada di dalam route lain secara hierarki. Cara termudah memahaminya adalah dengan melihat folder bertingkat. Misalnya, semua halaman blog diletakkan di folder blog.

Struktur folder nested route

src/routes/
├── +page.svelte
├── about/
│   └── +page.svelte
└── blog/
    ├── +page.svelte
    ├── hello-sveltekit/
    │   └── +page.svelte
    └── routing-dasar/
        └── +page.svelte

Struktur di atas akan menghasilkan route:

  • /blog
  • /blog/hello-sveltekit
  • /blog/routing-dasar

Namun untuk blog nyata, membuat folder statis per artikel kurang fleksibel. Karena itu, biasanya dipakai route dinamis menggunakan parameter folder.

Contoh halaman daftar blog

Buat file src/routes/blog/+page.svelte:

<script>
  const posts = [
    { title: 'Hello SvelteKit', slug: 'hello-sveltekit' },
    { title: 'Routing Dasar', slug: 'routing-dasar' },
    { title: 'Belajar Nested Route', slug: 'nested-route' }
  ];
</script>

<svelte:head>
  <title>Blog - Belajar SvelteKit</title>
</svelte:head>

<h1>Blog</h1>
<p>Daftar artikel:</p>

<ul>
  {#each posts as post}
    <li>
      <a href={`/blog/${post.slug}`}>{post.title}</a>
    </li>
  {/each}
</ul>

<a href="/">Kembali ke Home</a>

Contoh ini menunjukkan penggunaan anchor untuk membangun link dinamis berdasarkan data slug. SvelteKit akan menangani navigasi internal tanpa reload penuh seperti aplikasi tradisional, selama link menuju route internal aplikasi.

Route Dinamis dengan Parameter Folder [slug]

Untuk menangani URL dinamis seperti /blog/hello-sveltekit atau /blog/routing-dasar, SvelteKit menyediakan folder parameter. Cukup buat folder dengan nama di dalam kurung siku, misalnya [slug].

Struktur folder route dinamis

src/routes/
└── blog/
    ├── +page.svelte
    └── [slug]/
        └── +page.svelte

Folder [slug] berarti segmen URL pada posisi tersebut akan dianggap sebagai parameter bernama slug.

Membaca parameter route di +page.svelte

Untuk membaca parameter route dari komponen halaman, gunakan store page dari $app/state atau $app/stores sesuai pola proyek yang Anda pakai. Dalam praktik dasar, Anda bisa membaca parameter dari data halaman yang tersedia saat route aktif. Contoh berikut menunjukkan cara yang umum dipahami:

<script>
  import { page } from '$app/stores';

  $: slug = $page.params.slug;
</script>

<svelte:head>
  <title>Detail Blog</title>
</svelte:head>

<h1>Detail Blog</h1>
<p>Slug artikel: <strong>{slug}</strong></p>

<p>
  Ini adalah halaman dinamis untuk artikel dengan slug
  <code>{slug}</code>.
</p>

<a href="/blog">Kembali ke Blog</a>

Saat pengguna membuka /blog/hello-sveltekit, nilai slug akan menjadi hello-sveltekit. Jika membuka /blog/routing-dasar, nilainya berubah menjadi routing-dasar.

Kenapa cara ini bekerja? Karena SvelteKit memetakan segmen URL yang cocok dengan nama folder parameter. Folder [slug] memberi tahu router bahwa bagian itu variabel, bukan literal.

Contoh memakai slug untuk menampilkan data

Dalam contoh sederhana, kita bisa memetakan slug ke data lokal:

<script>
  import { page } from '$app/stores';

  const posts = {
    'hello-sveltekit': {
      title: 'Hello SvelteKit',
      content: 'Pengenalan singkat tentang SvelteKit.'
    },
    'routing-dasar': {
      title: 'Routing Dasar',
      content: 'Membahas +page.svelte dan nested route.'
    },
    'nested-route': {
      title: 'Belajar Nested Route',
      content: 'Memahami route bertingkat di SvelteKit.'
    }
  };

  $: slug = $page.params.slug;
  $: post = posts[slug];
</script>

{#if post}
  <h1>{post.title}</h1>
  <p>{post.content}</p>
{:else}
  <h1>Artikel tidak ditemukan</h1>
  <p>Slug: {slug}</p>
{/if}

<a href="/blog">Kembali ke Blog</a>

Untuk tutorial dasar, pendekatan ini sudah cukup. Di proyek nyata, data artikel biasanya diambil dari API, database, atau file markdown melalui load function. Tetapi konsep route-nya tetap sama.

Navigasi Antar Halaman dengan Tag Anchor

Untuk berpindah halaman di SvelteKit, Anda bisa langsung memakai tag anchor HTML standar:

<a href="/">Home</a>
<a href="/about">About</a>
<a href="/blog">Blog</a>

Ini penting karena untuk kebutuhan dasar, Anda tidak perlu komponen link khusus. SvelteKit akan mengintersep navigasi internal dan melakukan transisi client-side bila memungkinkan.

Contoh menu sederhana

Agar menu tersedia di beberapa halaman, Anda bisa menuliskannya berulang dulu saat belajar:

<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/blog">Blog</a>
</nav>

Jika nanti ingin dipakai global di seluruh aplikasi, menu biasanya diletakkan di layout, tetapi itu sudah masuk topik lanjutan.

Link dinamis

Untuk route dengan parameter, gunakan string template:

<a href={`/blog/${post.slug}`}>{post.title}</a>

Pastikan nilai slug valid untuk URL. Hindari karakter aneh, spasi mentah, atau string kosong. Praktik yang umum adalah menggunakan huruf kecil dan tanda hubung, misalnya belajar-sveltekit.

Struktur Folder Contoh Lengkap

Berikut struktur folder lengkap dari tutorial ini:

src/
└── routes/
    ├── +page.svelte
    ├── about/
    │   └── +page.svelte
    └── blog/
        ├── +page.svelte
        └── [slug]/
            └── +page.svelte

Ringkasan fungsi tiap file:

  • src/routes/+page.svelte: halaman home /
  • src/routes/about/+page.svelte: halaman about /about
  • src/routes/blog/+page.svelte: daftar artikel blog /blog
  • src/routes/blog/[slug]/+page.svelte: detail artikel berdasarkan slug /blog/:slug

Kesalahan Umum dan Tips Debugging

1. Salah menaruh file di luar src/routes

Jika route tidak muncul, cek dulu apakah file memang berada di src/routes. SvelteKit hanya mengenali routing dari folder ini.

2. Lupa memakai +page.svelte

Nama file harus tepat. Jika Anda membuat page.svelte tanpa tanda +, route tidak akan dikenali sebagai halaman.

3. Salah nama folder parameter

Folder dinamis harus memakai format [nama], misalnya [slug]. Jika Anda menulis slug biasa, SvelteKit akan menganggap itu path literal, bukan parameter.

4. Link mengarah ke path yang salah

Jika klik link tetapi halaman 404, cek kembali nilai href. Kesalahan sederhana seperti kurang slash atau slug tidak cocok sangat sering terjadi.

5. Parameter undefined

Jika $page.params.slug kosong atau undefined, biasanya ada dua kemungkinan: Anda tidak sedang berada di route dinamis, atau struktur folder tidak sesuai.

Tips: Saat debugging, tampilkan langsung nilai parameter di halaman, misalnya {slug}. Cara ini sederhana tetapi sangat membantu untuk memastikan route dinamis sudah terbaca.

Kapan Cukup Pakai Cara Ini, dan Kapan Perlu Melangkah Lebih Lanjut

Untuk aplikasi kecil sampai menengah, routing dengan +page.svelte, nested route, dan folder parameter sudah cukup untuk banyak kebutuhan. Anda bisa membuat landing page, halaman statis, daftar data, serta detail halaman berdasarkan URL dengan sangat cepat.

Namun saat aplikasi mulai mengambil data dari server, mengatur layout bersama, validasi parameter, atau menangani error per halaman, Anda biasanya akan mulai memakai file lain seperti +layout.svelte, +page.js, atau +page.server.js. Itu adalah langkah lanjutan setelah memahami fondasi routing dasar.

Penutup

Routing dasar SvelteKit relatif mudah dipelajari karena mengikuti struktur folder. Cukup pahami tiga hal inti: +page.svelte untuk membuat halaman, folder bertingkat untuk nested route, dan folder parameter seperti [slug] untuk URL dinamis.

Untuk navigasi, Anda bisa langsung menggunakan tag anchor biasa. Untuk membaca parameter route, akses nilai parameter yang diberikan oleh halaman aktif, misalnya slug pada route /blog/[slug].

Jika Anda baru mulai memakai SvelteKit, cobalah susun proyek kecil dengan route /, /about, /blog, dan /blog/[slug]. Dari latihan sederhana itu, fondasi routing Anda akan cukup kuat untuk masuk ke topik berikutnya seperti layout, load function, dan fetch data.