Cara Membuat Website dengan Strapi: Panduan Lengkap Headless CMS Open Source 2026

Apa Itu Strapi dan Kenapa Harus Menggunakannya?

Cara membuat website dengan Strapi menjadi semakin populer di kalangan developer Indonesia karena pendekatan headless CMS yang fleksibel dan modern. Strapi adalah headless CMS open source berbasis Node.js yang memungkinkan Anda mengelola konten melalui panel admin yang intuitif, lalu menyajikannya melalui REST API atau GraphQL ke frontend pilihan Anda - Next.js, Nuxt.js, React, Vue, mobile app, atau platform apapun.

Berbeda dari CMS tradisional seperti WordPress yang menggabungkan backend dan frontend dalam satu paket, Strapi memisahkan keduanya secara bersih. Hasilnya: konten Anda bisa digunakan di website, aplikasi mobile, smart TV, dan channel digital manapun sekaligus - dari satu sumber data yang sama. Ditambah fakta bahwa Strapi sepenuhnya open source dan bisa di-self-host, ini menjadi pilihan menarik bagi developer yang menginginkan kendali penuh tanpa vendor lock-in.

Beberapa keunggulan utama Strapi dibanding headless CMS lainnya:

• Open source & self-hosted: Tidak ada biaya lisensi bulanan, data Anda ada di server Anda sendiri.
• Content Type Builder visual: Buat struktur konten melalui antarmuka drag-and-drop tanpa menulis skema secara manual.
• REST API & GraphQL built-in: API siap pakai secara otomatis saat Anda membuat content type baru.
• Role & permission management: Atur siapa bisa mengakses dan memodifikasi konten dengan granular.
• Plugin ecosystem: Tersedia plugin resmi dan komunitas untuk email, upload media, i18n, dan banyak lagi.
• Customizable: Strapi dibangun di atas Node.js/Koa.js sehingga bisa dikustomisasi sepenuhnya sesuai kebutuhan.

Kebutuhan Sebelum Memulai

Sebelum mulai mempraktikkan cara membuat website dengan Strapi, pastikan lingkungan pengembangan Anda sudah siap dengan komponen-komponen berikut.

Persyaratan Sistem

• Node.js: Versi 18, 20, atau 22 LTS (Strapi v5 tidak mendukung versi di bawah 18)
• Package manager: npm (bundled dengan Node.js), yarn, atau pnpm
• Database: SQLite (default, cukup untuk development), PostgreSQL, MySQL, atau MariaDB (untuk production)
• RAM minimum: 1 GB untuk development, 2 GB+ direkomendasikan untuk production
• Sistem operasi: Windows 10/11, macOS, atau Linux

Periksa versi Node.js dengan menjalankan node -v di terminal. Jika belum terinstall atau versinya terlalu lama, unduh dari nodejs.org dan pilih versi LTS terbaru.

Langkah 1: Instalasi Strapi

Cara termudah membuat proyek Strapi baru adalah menggunakan CLI resmi. Buka terminal atau command prompt, lalu jalankan perintah berikut:

npx create-strapi-app@latest my-strapi-project

CLI akan menanyakan beberapa konfigurasi awal:

1. Installation type: Pilih Quickstart untuk menggunakan SQLite secara otomatis (paling mudah untuk memulai), atau Custom jika ingin mengonfigurasi database sendiri.
2. Use TypeScript? Pilih Yes jika Anda familiar dengan TypeScript untuk type safety yang lebih baik.
3. Run with --example? Pilih No untuk memulai dari proyek kosong.

Proses instalasi akan mengunduh semua dependensi yang diperlukan. Setelah selesai, masuk ke direktori proyek dan jalankan server development:

cd my-strapi-project
npm run develop

Server Strapi akan berjalan di http://localhost:1337. Buka browser dan akses http://localhost:1337/admin untuk membuat akun administrator pertama Anda.

Langkah 2: Konfigurasi Admin Pertama Kali

Saat pertama kali membuka admin panel Strapi, Anda diminta membuat akun Super Admin. Isi formulir registrasi dengan:

• First name & Last name: Nama Anda
• Email: Alamat email aktif yang akan digunakan untuk login
• Password: Password kuat minimal 8 karakter (kombinasi huruf besar, kecil, angka, dan simbol)

Setelah berhasil masuk, Anda akan disambut oleh dashboard Strapi. Luangkan waktu sejenak untuk menjelajahi antarmukanya sebelum melanjutkan ke langkah berikutnya.

Langkah 3: Membuat Content Type

Content Type di Strapi adalah seperti "template" atau "skema" untuk jenis konten Anda. Misalnya, jika Anda membuat website blog, Anda perlu Content Type bernama "Artikel" dengan field seperti judul, konten, tanggal publikasi, dan kategori. Ini adalah inti dari cara membuat website dengan Strapi.

Membuat Content Type "Artikel"

1. Di panel kiri, klik Content-Type Builder.
2. Klik Create new collection type (Collection type digunakan untuk konten yang memiliki banyak entri, seperti artikel atau produk).
3. Masukkan nama Artikel di kolom Display name. Strapi otomatis mengisi API ID dalam format artikel.
4. Klik Continue.
5. Tambahkan field satu per satu:
   • Klik Add another field → pilih Text → beri nama judul → pilih Short text → klik Add another field.
   • Tambahkan field konten bertipe Rich text.
   • Tambahkan field slug bertipe UID, hubungkan ke field judul untuk generate slug otomatis.
   • Tambahkan field deskripsi bertipe Text (Long text).
   • Tambahkan field tanggal_publikasi bertipe Date.
   • Tambahkan field gambar_utama bertipe Media (Single media).
6. Klik Save. Strapi akan me-restart server secara otomatis untuk menerapkan perubahan skema.

Membuat Content Type "Kategori"

Buat collection type kedua bernama Kategori dengan field:

• nama (Short text)
• slug (UID, dihubungkan ke nama)

Setelah keduanya dibuat, tambahkan relasi antara Artikel dan Kategori: buka Content Type Builder > Artikel > klik Add another field > pilih Relation > pilih hubungan Artikel has many Kategoris. Klik Finish lalu Save.

Langkah 4: Menambahkan Konten

Setelah content type terbuat, saatnya mengisi konten. Buka Content Manager di panel kiri, pilih Artikel, lalu klik tombol Create new entry.

Isi semua field yang diperlukan - judul, konten, deskripsi, tanggal, dan upload gambar. Setelah selesai, klik tombol Save untuk menyimpan sebagai draft, atau langsung klik Publish untuk mempublikasikan artikel. Entri yang dipublikasikan akan tersedia melalui API.

Langkah 5: Mengonfigurasi Permissions API

Secara default, semua endpoint API Strapi bersifat private dan memerlukan autentikasi. Untuk membuat konten bisa diakses secara publik (misalnya untuk website yang dibangun di atas Strapi), Anda perlu mengatur permissions.

1. Buka Settings di panel kiri bawah.
2. Di bagian Users & Permissions Plugin, klik Roles.
3. Klik role Public.
4. Di bagian Permissions, expand Artikel. Centang find (daftar semua artikel) dan findOne (detail satu artikel).
5. Lakukan hal yang sama untuk Kategori.
6. Klik Save.

Sekarang coba akses http://localhost:1337/api/artikels di browser atau aplikasi REST client seperti Insomnia/Postman. Anda akan mendapatkan response JSON berisi semua artikel yang sudah dipublikasikan.

Langkah 6: Mengonsumsi API Strapi dari Frontend Next.js

Kekuatan sejati cara membuat website dengan Strapi terlihat saat Anda menghubungkannya dengan framework frontend modern. Berikut contoh mengonsumsi API Strapi dari Next.js 14+ dengan App Router.

Setup Proyek Next.js

Buka terminal baru (biarkan server Strapi tetap berjalan), lalu buat proyek Next.js:

npx create-next-app@latest my-frontend --typescript --tailwind --app
cd my-frontend

Fetch Data dari Strapi

Buat file lib/strapi.ts untuk utilitas pemanggilan API:

const STRAPI_URL = process.env.NEXT_PUBLIC_STRAPI_URL || 'http://localhost:1337';

export async function getArtikels() {
  const res = await fetch(`${STRAPI_URL}/api/artikels?populate=*`, {
    next: { revalidate: 60 }, // ISR: revalidasi setiap 60 detik
  });
  if (!res.ok) throw new Error('Gagal mengambil data artikel');
  return res.json();
}

export async function getArtikelBySlug(slug: string) {
  const res = await fetch(
    `${STRAPI_URL}/api/artikels?filters[slug][$eq]=${slug}&populate=*`,
    { next: { revalidate: 60 } }
  );
  if (!res.ok) throw new Error('Gagal mengambil artikel');
  const data = await res.json();
  return data.data[0] || null;
}

Membuat Halaman Daftar Artikel

Buat file app/blog/page.tsx:

import { getArtikels } from '@/lib/strapi';
import Link from 'next/link';

export default async function BlogPage() {
  const { data: artikels } = await getArtikels();

  return (
    <main className="max-w-4xl mx-auto p-8">
      <h1 className="text-3xl font-bold mb-8">Blog</h1>
      <div className="grid gap-6">
        {artikels.map((artikel: any) => (
          <article key={artikel.id} className="border rounded-lg p-6">
            <h2 className="text-xl font-semibold">
              <Link href={`/blog/${artikel.attributes.slug}`}>
                {artikel.attributes.judul}
              </Link>
            </h2>
            <p className="text-gray-600 mt-2">
              {artikel.attributes.deskripsi}
            </p>
          </article>
        ))}
      </div>
    </main>
  );
}

Langkah 7: Deploy Strapi ke Production

Untuk menjalankan Strapi di production, Anda memerlukan VPS atau cloud server. Berikut langkah-langkah deploy ke VPS Linux:

Persiapan Server

1. Install Node.js LTS dan npm di server.
2. Install dan konfigurasi PostgreSQL sebagai database production (lebih andal dari SQLite).
3. Install PM2 untuk process management: npm install -g pm2.
4. Install Nginx sebagai reverse proxy.

Konfigurasi Database Production

Update file config/database.ts untuk menggunakan PostgreSQL:

export default ({ env }) => ({
  connection: {
    client: 'postgres',
    connection: {
      host: env('DATABASE_HOST', 'localhost'),
      port: env.int('DATABASE_PORT', 5432),
      database: env('DATABASE_NAME', 'strapi'),
      user: env('DATABASE_USERNAME', 'strapi'),
      password: env('DATABASE_PASSWORD'),
      ssl: env.bool('DATABASE_SSL', false),
    },
  },
});

Build dan Jalankan

# Di server, setelah upload kode
npm install --production
NODE_ENV=production npm run build
pm2 start npm --name "strapi" -- run start
pm2 save
pm2 startup

Konfigurasi Nginx

Buat konfigurasi Nginx untuk reverse proxy Strapi:

server {
    listen 80;
    server_name api.namadomain.com;

    location / {
        proxy_pass http://localhost:1337;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Aktifkan HTTPS dengan Certbot: sudo certbot --nginx -d api.namadomain.com.

Tips Optimasi Performa Strapi

Agar website dengan Strapi berjalan cepat dan efisien di production, terapkan beberapa optimasi berikut:

• Gunakan populate secara selektif: Hindari populate=* di production - sebutkan hanya relasi yang benar-benar dibutuhkan untuk mengurangi payload API.
• Aktifkan Redis untuk caching: Gunakan plugin @strapi/plugin-redis untuk meng-cache respons API dan mengurangi beban database.
• Konfigurasi upload ke cloud storage: Gunakan plugin @strapi/provider-upload-cloudinary atau AWS S3 agar file media tidak disimpan di server lokal.
• Rate limiting: Aktifkan rate limiting untuk mencegah abuse API.
• Gunakan ISR atau SSG di frontend: Manfaatkan Incremental Static Regeneration Next.js agar halaman di-render sekali dan di-cache, bukan setiap request.

FAQ: Pertanyaan Umum Cara Membuat Website dengan Strapi

Apakah Strapi benar-benar gratis?

Strapi Community Edition adalah 100% gratis dan open source di bawah lisensi MIT. Anda bisa menggunakannya secara komersial tanpa biaya lisensi. Strapi juga menawarkan paket berbayar (Growth dan Enterprise) yang menambahkan fitur seperti SSO, audit log, dan support premium - tapi paket gratis sudah lebih dari cukup untuk sebagian besar proyek.

Bahasa pemrograman apa yang digunakan Strapi?

Strapi dibangun dengan Node.js dan framework Koa.js di sisi backend. Antarmuka admin menggunakan React. Anda bisa mengembangkan kustomisasi Strapi menggunakan JavaScript atau TypeScript. Untuk frontend, Anda bebas menggunakan teknologi apapun karena Strapi hanya menyediakan API.

Database apa yang paling direkomendasikan untuk Strapi production?

PostgreSQL adalah pilihan terbaik untuk Strapi di environment production. PostgreSQL lebih andal, mendukung transaksi kompleks, dan performa lebih baik dibanding SQLite atau MySQL untuk workload CMS. SQLite hanya direkomendasikan untuk development atau proyek sangat kecil karena tidak mendukung koneksi concurrent.

Apakah Strapi bisa digunakan untuk website e-commerce?

Strapi bukan platform e-commerce out-of-the-box, tapi sangat bisa digunakan sebagai backend untuk toko online. Anda bisa membuat content type untuk Produk, Kategori, Order, dan lainnya, lalu membangun logika bisnis e-commerce di layer API atau frontend. Untuk proyek e-commerce skala besar, pertimbangkan mengintegrasikan Strapi dengan Medusa.js sebagai e-commerce engine.

Berapa RAM yang dibutuhkan server untuk menjalankan Strapi?

Minimal 1 GB RAM untuk server production Strapi dengan traffic rendah hingga menengah. Untuk traffic tinggi atau jika menjalankan Strapi bersama database di satu server, gunakan minimal 2 GB RAM. VPS 2 GB RAM sudah cukup untuk sebagian besar website bisnis. Perhatikan bahwa proses build Strapi membutuhkan memory lebih besar dari saat runtime.

Apakah Strapi mendukung multi-language (i18n)?

Ya. Strapi memiliki plugin internasionalisasi (i18n) bawaan yang memungkinkan Anda membuat konten dalam berbagai bahasa. Aktifkan plugin di Settings > Internationalization, tambahkan locale yang diperlukan (misalnya id-ID untuk Bahasa Indonesia dan en-US untuk Inggris), lalu tandai field mana saja yang ingin dilokalisasi saat membuat content type.

Bagaimana cara memperbarui Strapi ke versi terbaru?

Jalankan npx @strapi/upgrade latest untuk upgrade otomatis ke versi Strapi terbaru. Selalu baca changelog dan migration guide sebelum upgrade di production, terutama untuk major version. Buat backup database dan kode sebelum melakukan upgrade.

Kesimpulan: Strapi adalah Masa Depan Pengelolaan Konten Web

Cara membuat website dengan Strapi membuka paradigma baru dalam pengembangan web modern. Dengan memisahkan backend (pengelolaan konten) dari frontend (presentasi), Anda mendapatkan fleksibilitas luar biasa untuk mendistribusikan konten ke berbagai platform sekaligus, sambil tetap mengelola semuanya dari satu tempat yang terpusat.

Memulai dengan Strapi memang memiliki kurva belajar yang lebih curam dibandingkan WordPress, terutama bagi yang belum familiar dengan konsep API dan headless CMS. Namun investasi waktu untuk mempelajarinya sangat sepadan, terutama jika Anda membangun aplikasi web modern yang membutuhkan performa tinggi, fleksibilitas arsitektur, dan kemampuan omnichannel.

Butuh VPS yang handal untuk menjalankan Strapi di production? VPS Hosting HostingEkspres tersedia mulai dari harga terjangkau dengan server berlokasi di Indonesia, uptime 99.9%, dan support teknis 24/7 dalam Bahasa Indonesia.