Belajar Next.js dari Nol – Part 7: Integrasi Database MongoDB, MySQL & PostgreSQL

Aplikasi web modern tidak bisa lepas dari penyimpanan data. Setelah memiliki sistem autentikasi, kini waktunya menyambungkan aplikasi Next.js ke database agar data dapat disimpan, dibaca, dan dimanipulasi secara dinamis.

---

🎯 Tujuan Part 7

• Mengenal pilihan database populer: MongoDB, MySQL, PostgreSQL
• Cara integrasi database ke aplikasi Next.js
• Membuat model dan koneksi database
• Mengelola data secara dinamis dengan API Routes

---

📌 1. Opsi Database & Kapan Menggunakannya

Database	Cocok Untuk	Bentuk Data
MongoDB	Aplikasi fleksibel, cepat, dan tanpa relasi	Dokumen (JSON)
MySQL	Sistem klasik dengan relasi (produk, user)	Relasional
PostgreSQL	Kebutuhan enterprise dan query kompleks	Relasional

---

🧰 2. Integrasi MongoDB di Next.js

a. Install mongoose

npm install mongoose

b. Buat File Koneksi lib/mongodb.js

import mongoose from 'mongoose';

const MONGODB_URI = process.env.MONGODB_URI;

let cached = global.mongoose || { conn: null, promise: null };

export async function connectDB() {
  if (cached.conn) return cached.conn;
  if (!cached.promise) {
    cached.promise = mongoose.connect(MONGODB_URI, {
      dbName: 'nextjs_app',
      useNewUrlParser: true,
      useUnifiedTopology: true,
    });
  }
  cached.conn = await cached.promise;
  return cached.conn;
}

c. Buat Model models/User.js

import mongoose from 'mongoose';

const UserSchema = new mongoose.Schema({
  name: String,
  email: String,
});

export default mongoose.models.User || mongoose.model('User', UserSchema);

d. API Route app/api/users/route.js

import { connectDB } from '@/lib/mongodb';
import User from '@/models/User';

export async function GET() {
  await connectDB();
  const users = await User.find();
  return Response.json(users);
}

export async function POST(req) {
  const body = await req.json();
  await connectDB();
  const user = await User.create(body);
  return Response.json(user);
}

🔐 Tambahkan .env.local:
MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/

---

💾 3. Integrasi MySQL/PostgreSQL dengan Prisma

a. Install Prisma

npm install prisma --save-dev
npx prisma init

b. Edit File prisma/schema.prisma

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "mysql" // atau postgresql
  url      = env("DATABASE_URL")
}

model User {
  id    Int    @id @default(autoincrement())
  name  String
  email String @unique
}

c. Jalankan Migrasi & Generate Client

npx prisma migrate dev --name init
npx prisma generate

d. Query di API Route

import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();

export async function GET() {
  const users = await prisma.user.findMany();
  return Response.json(users);
}

🔐 Tambahkan .env:
DATABASE_URL="mysql://user:pass@localhost:3306/dbname"

---

📡 4. Mengakses Data dari Frontend

Contoh fetch data dari halaman:

'use client';

import { useEffect, useState } from 'react';

export default function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('/api/users')
      .then(res => res.json())
      .then(data => setUsers(data));
  }, []);

  return (
    <ul>
      {users.map(u => (
        <li key={u.id}>{u.name} - {u.email}</li>
      ))}
    </ul>
  );
}

---

🧠 Best Practice Integrasi DB

Praktik Baik	Penjelasan
Gunakan .env.local	Jangan hardcode kredensial DB
Gunakan model/modular structure	Pisahkan koneksi & model agar reusable
Batasi field sensitif	Jangan kirim password atau token di response API
Gunakan try/catch	Untuk handle error dari koneksi/insert data

---

📣 Elektra Network Vision – Integrasi Database Tanpa Ribet

Kami bantu Anda:

• Membangun backend REST/GraphQL siap produksi
• Koneksi database MongoDB, MySQL, atau PostgreSQL
• Mengoptimalkan query dan arsitektur backend web

🌐 elektranetworkvision.com – Jasa pengembangan web & database yang aman dan cepat.