Tutorial Lengkap Integrasi Next.js dengan CouchDB untuk Aplikasi Web Modern

Panduan Lengkap Integrasi Next.js dengan CouchDB untuk Aplikasi Web Modern

CouchDB adalah database NoSQL yang mendukung replication, fault-tolerance, dan penyimpanan data dalam format JSON. Dengan arsitektur RESTful-nya, CouchDB sangat cocok diintegrasikan dengan framework modern seperti Next.js.

Dalam artikel ini, kita akan membahas cara menghubungkan Next.js ke CouchDB, mengelola data CRUD, serta implementasi praktik terbaik agar proyek Anda tetap aman, cepat, dan SEO-friendly.

---

Mengapa CouchDB + Next.js?

🔹 Next.js

• SSR/SSG mendukung SEO
• API routes langsung di dalam framework
• Cepat, ringan, dan modern

🔹 CouchDB

• Basis data JSON-native
• REST API siap pakai
• Replikasi dan sinkronisasi otomatis

Kombinasi ini sangat cocok untuk aplikasi real-time, offline-ready, dan sistem berbasis microservices.

---

Langkah 1: Inisialisasi Proyek Next.js

npx create-next-app nextjs-couchdb
cd nextjs-couchdb
npm run dev

---

Langkah 2: Siapkan CouchDB

1. Instalasi Lokal:
   • Unduh dari https://couchdb.apache.org
   • Default port: 5984
   • Default user: admin, password ditentukan saat setup
2. Buat Database:
   • Contoh: todos
   • Endpoint: http://localhost:5984/todos

---

Langkah 3: Instalasi Library CouchDB untuk Node.js

Kita akan menggunakan nano, salah satu library resmi untuk Node.js.

npm install nano

---

Langkah 4: Buat API Route di Next.js

Next.js menyediakan API routes langsung di dalam proyek. Buat file pages/api/todos.js:

// pages/api/todos.js
import nano from 'nano';

const couch = nano('http://admin:password@localhost:5984');
const db = couch.db.use('todos');

export default async function handler(req, res) {
  if (req.method === 'GET') {
    const result = await db.list({ include_docs: true });
    const todos = result.rows.map(row => row.doc);
    res.status(200).json(todos);
  }

  if (req.method === 'POST') {
    const body = req.body;
    const response = await db.insert(body);
    res.status(201).json(response);
  }
}

---

Langkah 5: Buat Halaman Frontend

Edit pages/index.js untuk menampilkan dan menambahkan data:

import { useEffect, useState } from 'react';

export default function Home() {
  const [todos, setTodos] = useState([]);
  const [text, setText] = useState('');

  const fetchTodos = async () => {
    const res = await fetch('/api/todos');
    const data = await res.json();
    setTodos(data);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    await fetch('/api/todos', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ text }),
    });
    setText('');
    fetchTodos();
  };

  useEffect(() => {
    fetchTodos();
  }, []);

  return (
    <main style={{ padding: '2rem' }}>
      <h1>Todo App dengan Next.js + CouchDB</h1>

      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={text}
          onChange={(e) => setText(e.target.value)}
          placeholder="Tambahkan todo"
        />
        <button type="submit">Tambah</button>
      </form>

      <ul>
        {todos.map((todo) => (
          <li key={todo._id}>{todo.text}</li>
        ))}
      </ul>
    </main>
  );
}

---

Langkah 6: Keamanan dan Praktik Terbaik

✅ Jangan expose kredensial di client-side

Solusi:

• Buat .env.local: COUCH_URL=http://admin:password@localhost:5984 COUCH_DB=todos
• Ganti handler: const couch = nano(process.env.COUCH_URL); const db = couch.db.use(process.env.COUCH_DB);

✅ Gunakan CORS jika akan diakses dari domain lain

✅ Gunakan _rev saat menghapus atau mengupdate dokumen

---

Kesimpulan

Mengintegrasikan Next.js dengan CouchDB sangat efisien untuk membangun aplikasi real-time berbasis REST API. Dengan pendekatan API route dan database JSON-native, Anda dapat membangun sistem dashboard, manajemen data, hingga aplikasi offline-first yang ringan dan fleksibel.

---

CTA – Butuh Bantuan Bangun Sistem Modern dengan Next.js + CouchDB?

🚀 Percayakan pengembangan sistem Anda pada Elektra Network Vision, spesialis solusi teknologi web modern.

🌐 Kunjungi elektranetworkvision.com untuk konsultasi, integrasi sistem, atau pengembangan skala enterprise.

---

SEO Metadata

• Judul SEO:
• Slug URL: nextjs-couchdb-integrasi-api
• Meta Description:
• Keyword:
• Tags: #ElektraNetworkVision

---

Ingin lanjut dengan topik auth di Next.js + CouchDB, replikasi antar server, atau implementasi offline mode? Siap!