Cara Menghubungkan EmDash CMS dengan Next.js
Layak dinyatakan secara jelas sebelum apa pun yang lain: dokumentasi EmDash langsung soal ini. "Bukan headless CMS — EmDash terintegrasi ketat dengan Astro dan berjalan di deployment yang sama, alih-alih sebagai layanan terpisah yang kamu panggil lewat API." Kalau kamu sudah punya codebase Next.js dan ingin EmDash sebagai backend decoupled di baliknya, itu bukan use case yang dibangun di sekitar EmDash. Ini versi jujur soal cara melakukannya tetap saja, dan apa yang dikorbankannya.
Daftar Isi
- Apa Sesungguhnya yang Ditawarkan EmDash buat Frontend Non-Astro
- Apa yang Kamu Korbankan Mengambil Jalur Ini
- Alternatif yang Layak Dipertimbangkan Lebih Dulu
- Kalau Kamu Tetap Ingin Next.js Secara Spesifik
- Pertanyaan yang Sering Diajukan
- Apakah ada SDK atau adapter Next.js EmDash resmi?
- Apakah perubahan konten akan muncul di Next.js segera, seperti di Astro?
- Haruskah saya memigrasikan aplikasi Next.js saya ke Astro saja?
- Apakah EmDash mendukung GraphQL buat frontend non-Astro?
- Kesimpulan
Apa Sesungguhnya yang Ditawarkan EmDash buat Frontend Non-Astro
EmDash mengekspos REST API di `/_emdash/api/` buat operasi konten, media, dan schema, diautentikasi lewat Bearer token, dengan dukungan CORS buat request browser (allowed origin bisa dikonfigurasi di deployment-mu). Itu berarti aplikasi Next.js terpisah sungguh-sungguh bisa mengambil konten dari instance EmDash — itu cuma bukan pengalaman terintegrasi dan single-deployment yang jadi dasar rancangan EmDash.
GET /_emdash/api/content/posts
Authorization: Bearer YOUR_API_TOKENFetch minimal dari Next.js Server Component:
async function getPosts() {
const res = await fetch("https://your-emdash-site.com/_emdash/api/content/posts?status=published", {
headers: { Authorization: `Bearer ${process.env.EMDASH_API_TOKEN}` },
});
const json = await res.json();
return json.data.items;
}
export default async function BlogPage() {
const posts = await getPosts();
return (
<ul>
{posts.map((post) => (
<li key={post.id}>{post.data.title}</li>
))}
</ul>
);
}Apa yang Kamu Korbankan Mengambil Jalur Ini
Tabel perbandingan EmDash sendiri langsung soal trade-off antara model terintegrasinya dan setup headless decoupled tradisional:
Headless CMS: Frontend — bawa milikmu sendiri. Deployment — CMS + frontend, terpisah. Update konten — webhook/rebuild. EmDash: Frontend — komponen Astro. Deployment — deployment tunggal. Update konten — segera (SSR).
Menjalankan EmDash di belakang aplikasi Next.js terpisah menempatkanmu persis di baris "headless CMS" itu, bukan yang terintegrasi. Secara konkret, itu berarti:
- Tanpa update live otomatis — Next.js tidak akan tahu konten berubah sampai kamu rebuild, memakai ISR dengan interval revalidasi, atau memasang webhook revalidasi on-demand sendiri.
- Tanpa type TypeScript yang dihasilkan mengalir dari model kontenmu ke template-mu — kamu bekerja dengan bentuk respons REST generik EmDash sebagai gantinya.
- Dua deployment yang perlu dikelola dan dijaga tetap sinkron (instance EmDash/Astro dan aplikasi Next.js), alih-alih satu.
- Kamu masih perlu menjalankan admin berbasis-Astro EmDash sendiri di suatu tempat — ini tidak menghilangkan bagian itu, ia cuma menambahkan aplikasi kedua di depannya.
Alternatif yang Layak Dipertimbangkan Lebih Dulu
Kalau alasan sesungguhnya kamu ingin Next.js adalah komponen React — bukan routing, data fetching, atau fitur framework spesifik Next.js — Astro mendukung me-render komponen React langsung di dalam situs EmDash Astro-native lewat integrasi resmi `@astrojs/react`. `astro.config.mjs` proyek ini sendiri memakai persis pola itu:
import react from "@astrojs/react";
export default defineConfig({
integrations: [
react(),
emdash({ /* ... */ }),
],
});Dengan integrasi itu terpasang, kamu menulis komponen React `.tsx` dan menaruhnya ke halaman `.astro` sebagai island — mendapatkan React sesungguhnya di mana kamu butuh interaktivitas, sementara query konten, update live, dan type yang dihasilkan EmDash terus bekerja persis seperti terdokumentasi. Buat sebagian besar tim yang kebutuhan sesungguhnya adalah "saya ingin menulis React", ini memuaskan itu tanpa pemisahan deployment dan hilangnya manfaat integrasi dari aplikasi Next.js terpisah.
Kalau Kamu Tetap Ingin Next.js Secara Spesifik
- Deploy EmDash sebagai aplikasi Astro-nya sendiri (Node.js atau Cloudflare Workers) — ini backend konten dan admin panel-mu.
- Hasilkan API token dari admin panel EmDash buat aplikasi Next.js-mu berautentikasi.
- Konfigurasikan CORS di deployment EmDash-mu buat mengizinkan origin aplikasi Next.js-mu.
- Ambil konten di Next.js lewat REST API — Server Component dengan `fetch`, atau library data-fetching pilihanmu.
- Tangani kesegaran konten sendiri: ISR dengan jendela revalidasi pendek adalah pendekatan paling sederhana; hook plugin `content:afterSave` yang memanggil webhook revalidasi Next.js-mu lebih presisi.
Pertanyaan yang Sering Diajukan
Apakah ada SDK atau adapter Next.js EmDash resmi?
Tidak — permukaan integrasi EmDash (fungsi query, type yang dihasilkan, update live) spesifik-Astro. Aplikasi Next.js berbicara ke EmDash dengan cara yang sama seperti berbicara ke REST API mana pun, tanpa tooling khusus-framework yang disediakan.
Apakah perubahan konten akan muncul di Next.js segera, seperti di Astro?
Tidak secara otomatis. Perilaku "segera saat runtime" EmDash spesifik buat Live Content Collections Astro dalam deployment yang sama. Aplikasi Next.js terpisah butuh strategi revalidasinya sendiri — ISR, revalidasi on-demand, atau polling.
Haruskah saya memigrasikan aplikasi Next.js saya ke Astro saja?
Kalau manfaat spesifik EmDash (deployment tunggal, update live, type yang dihasilkan) cukup penting buat proyekmu, dan kamu bisa me-render komponen interaktifmu sebagai React island di dalam Astro lewat `@astrojs/react`, itu jalur yang lebih selaras dibanding menempelkan EmDash ke Next.js sebagai backend decoupled. Kalau aplikasi Next.js-mu punya dependensi khusus-framework yang dalam (pola khusus App Router, library khusus-Next), biaya migrasi itu nyata dan layak ditimbang dengan jujur.
Apakah EmDash mendukung GraphQL buat frontend non-Astro?
Tidak — permukaan API yang terdokumentasi adalah REST, bukan GraphQL. Kalau aplikasi Next.js-mu secara khusus mengharapkan API GraphQL seperti yang disediakan Contentful atau Hygraph, EmDash tidak menawarkan itu hari ini.
Kesimpulan
EmDash eksplisit bahwa ia tidak dibangun buat jadi backend headless decoupled buat framework frontend terpisah — REST API-nya membuat itu secara teknis mungkin, tapi kamu kehilangan update live, type safety, dan kesederhanaan single-deployment yang jadi nilai jual sesungguhnya EmDash. Kalau kebutuhan sesungguhnya kamu adalah komponen React, `@astrojs/react` di dalam situs EmDash native sangat mungkin jawaban yang lebih baik. Lihat panduan lengkap kami soal menghubungkan EmDash dengan Astro dengan cara ia dirancang buat bekerja buat jalur itu.
Komentar