Backend headless siap pakai untuk SvelteKit dan Next.js

Backend headless untuk SvelteKit atau Next.js menyimpan datamu dan menyajikannya lewat API, jadi frontend hanya mengambil dan menampilkan. Dengan Kanesh, kamu menjalankan satu container, membuat koleksi di Studio, lalu memanggil API REST dari kode server dengan token pribadi. Belum ada SDK, jadi kamu memakai fetch biasa.

Menyiapkannya

Bangun image dari source lalu jalankan. SQLite adalah default dan tidak butuh layanan lain:

git clone https://github.com/kaneshdev/kanesh.git
cd kanesh
docker build --tag kanesh .
docker run --name kanesh -p 127.0.0.1:8080:8080 -v kanesh-data:/data kanesh

Buka http://127.0.0.1:8080, klaim instalasi dengan token dari /data/claim-token, lalu buat akun owner. Setelah itu di Studio buka Settings → Data model → Create collection dan tambahkan koleksi posts dengan field string title dan field text body. Koleksi langsung tersedia lewat REST dan GraphQL. Langkah lengkapnya ada di Memulai.

Berikutnya, buka Account → API tokens dan buat token pribadi. Secret hanya tampil sekali dan disimpan sebagai hash. Taruh di environment server aplikasimu:

KANESH_URL=http://127.0.0.1:8080
KANESH_WORKSPACE=WORKSPACE_ID
KANESH_TOKEN=...

Mengambil data di SvelteKit

Panggil Kanesh dari fungsi load di sisi server, supaya token tidak pernah sampai ke browser:

// src/routes/posts/+page.server.ts
import { KANESH_URL, KANESH_WORKSPACE, KANESH_TOKEN } from '$env/static/private';

export async function load({ fetch }) {
	const res = await fetch(
		`${KANESH_URL}/api/v1/workspaces/${KANESH_WORKSPACE}/collections/posts/records`,
		{ headers: { Authorization: `Bearer ${KANESH_TOKEN}` } }
	);
	const body = await res.json();
	return { posts: body.data };
}

Mengambil data di Next.js

Di App Router, server component bisa melakukan hal yang sama:

// app/posts/page.tsx
export default async function Page() {
	const res = await fetch(
		`${process.env.KANESH_URL}/api/v1/workspaces/${process.env.KANESH_WORKSPACE}/collections/posts/records`,
		{ headers: { Authorization: `Bearer ${process.env.KANESH_TOKEN}` } }
	);
	const { data } = await res.json();
	return (
		<ul>
			{data.map((post: { title: string }) => (
				<li key={post.title}>{post.title}</li>
			))}
		</ul>
	);
}

Respons REST memakai amplop data dan meta, dan mendukung filter, sort, dan lookup. GraphQL tersedia di koleksi yang sama. Karena belum ada SDK, buat tipe TypeScript dari ekspor OpenAPI 3.1, yang Kanesh bangun dari skema yang berjalan, dengan generator apa pun yang kamu suka.

Yang dibutuhkan frontend dan yang dimiliki Kanesh

Kebutuhan	Di Kanesh
Data bertipe	Sembilan tipe field: string, text, integer, float, boolean, datetime, json, file, dan image
Relasi	N:1, 1:N, dan N:N dengan foreign key asli di SQLite dan PostgreSQL
API	REST, GraphQL, dan ekspor OpenAPI 3.1
Kredensial server	Token API pribadi yang di-hash, punya masa berlaku, dan bisa dicabut
Konten publik	Peran Public untuk akses tanpa login, nonaktif secara default
Tipe untuk TypeScript	Dibuat dari ekspor OpenAPI
Update realtime	Belum
SDK	Belum

Simpan token di server

Panggil Kanesh dari fungsi load, server component, dan route handler. Kalau browser harus memanggilnya langsung, setel CORS_ENABLED dan CORS_ORIGINS ke origin yang persis, dan jangan pernah menaruh token pribadi di kode sisi klien. Untuk konten yang memang publik, aktifkan peran Public hanya pada koleksi yang membutuhkannya. Lihat konfigurasi dan kontrol akses.

FAQ

Apakah Kanesh punya SDK untuk SvelteKit atau Next.js?

Tidak. Belum ada SDK. Pakai fetch ke API REST, atau klien GraphQL apa pun ke endpoint GraphQL, dan buat tipe dari ekspor OpenAPI 3.1.

Bisakah dipakai untuk blog atau toko?

Bisa, sebagai sumber data. Use case blog dan use case ecommerce menunjukkan contoh koleksi dan relasi. Kanesh belum punya realtime, OAuth atau SSO, maupun workflow, dan ketiganya ada di roadmap, jadi cocokkan daftar itu dengan kebutuhan proyekmu.

Apakah bisa dipakai dengan framework selain kedua ini?

Bisa. Framework atau skrip apa pun yang bisa mengirim request HTTP dapat membaca API REST atau GraphQL, karena keduanya HTTP biasa.

Langkah berikutnya

Mulai dari Memulai. Kalau kamu membandingkannya dengan headless CMS, baca Kanesh vs Strapi.