Memulai dengan SvelteKit

SvelteKit adalah framework untuk membangun web application dengan Svelte yang powerful namun tetap terasa ringan. Berbeda dengan framework lain seperti Next.js (React) atau Nuxt (Vue), SvelteKit dikompilasi sehingga tidak ada virtual DOM — hasilnya adalah bundle yang lebih kecil dan performa yang lebih cepat.

Mengapa SvelteKit?

Sebelum memilih framework, selalu ada pertanyaan: mengapa harus ini?

Alasan saya memilih SvelteKit:

1. Sintaks yang bersih — tidak ada boilerplate useState, useEffect, atau decorator
2. Performa tinggi — kompilasi ke vanilla JavaScript
3. File-based routing — intuitif dan mudah dipahami
4. SSR + SSG + SPA — satu framework untuk semua kebutuhan

Instalasi

Pastikan Node.js v18+ sudah terpasang, lalu jalankan:

npm create svelte@latest nama-project
cd nama-project
npm install
npm run dev

SvelteKit akan otomatis membuka server development di http://localhost:5173.

Struktur Folder

src/
├── routes/          # Setiap folder = URL segment
│   ├── +page.svelte # Halaman utama (/)
│   ├── about/
│   │   └── +page.svelte  # /about
│   └── blog/
│       ├── +page.svelte  # /blog
│       └── [slug]/
│           └── +page.svelte  # /blog/nama-post (dinamis)
├── lib/             # Komponen & utilities yang bisa di-import
└── app.html         # Template HTML utama

Routing Dinamis

Untuk halaman dengan URL dinamis (seperti halaman detail artikel), gunakan folder dengan nama dalam kurung siku:

src/routes/blog/[slug]/+page.svelte

Nilai slug bisa diakses di +page.server.js:

export function load({ params }) {
  const { slug } = params;
  // Gunakan slug untuk fetch data...
  return { slug };
}

Data Loading

SvelteKit memisahkan antara server-side logic (+page.server.js) dan UI (+page.svelte). Data dari server di-pass ke halaman melalui export let data:

// +page.server.js
export function load() {
  return {
    message: 'Hello from server!'
  };
}

<!-- +page.svelte -->
<script>
  export let data;
</script>
<p>{data.message}</p>

Deploy

SvelteKit mendukung berbagai platform deployment. Untuk Vercel:

npm install -D @sveltejs/adapter-vercel

Ganti adapter-auto di svelte.config.js dengan adapter-vercel, lalu push ke GitHub dan hubungkan ke Vercel — selesai!

SvelteKit adalah pilihan yang solid untuk membangun website personal, blog, atau aplikasi skala kecil hingga menengah. Kurva belajarnya relatif rendah, terutama jika sudah familiar dengan konsep web dasar.