Bangun Proyek Nyata dengan Next.js dan MongoDB dari Awal

Daftar Isi

Pengantar Proyek
Persiapan Lingkungan Pengembangan
Struktur Proyek Next.js
Membuat Koneksi ke MongoDB
Membuat API Routes di Next.js
Membuat User Interface dengan React dan Tailwind CSS
Menyimpan dan Mengambil Data dari MongoDB
Deploy Proyek ke Vercel
Sumber Belajar dan Referensi

1. Pengantar Proyek

Pada ebook ini, kita akan membangun sebuah proyek web nyata menggunakan Next.js sebagai framework React yang powerful dan MongoDB sebagai database NoSQL yang fleksibel. Proyek ini akan mengajarkan Anda bagaimana menghubungkan frontend dan backend secara seamless, membuat API, dan mengelola data secara efisien.

Ilustrasi diagram arsitektur proyek Next.js dan MongoDB, menunjukkan frontend, backend API, dan database

Dengan mengikuti langkah demi langkah, Anda akan memahami konsep dasar dan praktik terbaik dalam membangun aplikasi modern fullstack.

2. Persiapan Lingkungan Pengembangan

Sebelum mulai coding, pastikan Anda sudah menyiapkan beberapa hal berikut:

Node.js versi terbaru (disarankan v16 ke atas)
Code editor seperti VSCode
Akun MongoDB Atlas untuk database cloud (gratis)
Terminal atau command prompt

Langkah instalasi Next.js:

npx create-next-app@latest nextjs-mongodb-project
cd nextjs-mongodb-project
npm run dev

Setelah menjalankan perintah di atas, buka http://localhost:3000 di browser Anda untuk melihat aplikasi Next.js default berjalan.

3. Struktur Proyek Next.js

Berikut adalah struktur folder utama yang akan kita gunakan:

/pages - Tempat file halaman dan API routes
/components - Komponen React yang dapat digunakan ulang
/lib - Kode library seperti koneksi database
/public - File statis seperti gambar

Diagram struktur folder proyek Next.js dengan folder pages, components, lib, dan public

Kita akan membuat folder lib untuk menyimpan file koneksi MongoDB agar mudah digunakan di seluruh aplikasi.

4. Membuat Koneksi ke MongoDB

Buat file lib/mongodb.js untuk mengatur koneksi ke MongoDB menggunakan mongodb driver.

import { MongoClient } from 'mongodb';

const uri = process.env.MONGODB_URI;
const options = {};

let client;
let clientPromise;

if (!process.env.MONGODB_URI) {
  throw new Error('Please add your Mongo URI to .env.local');
}

if (process.env.NODE_ENV === 'development') {
  // In development mode, use a global variable so the client is cached across hot reloads
  if (!global._mongoClientPromise) {
    client = new MongoClient(uri, options);
    global._mongoClientPromise = client.connect();
  }
  clientPromise = global._mongoClientPromise;
} else {
  // In production mode, create a new client for every connection
  client = new MongoClient(uri, options);
  clientPromise = client.connect();
}

export default clientPromise;

Jangan lupa buat file .env.local di root proyek dan tambahkan variabel berikut:

MONGODB_URI="mongodb+srv://username:password@cluster0.mongodb.net/mydatabase?retryWrites=true&w=majority"

Ganti username , password , dan mydatabase sesuai dengan akun MongoDB Atlas Anda.

5. Membuat API Routes di Next.js

Kita akan membuat API untuk mengelola data. Buat folder /pages/api/notes dan buat file index.js untuk menangani GET dan POST.

import clientPromise from '../../../lib/mongodb';

export default async function handler(req, res) {
  const client = await clientPromise;
  const db = client.db();

  if (req.method === 'GET') {
    const notes = await db.collection('notes').find({}).toArray();
    res.status(200).json(notes);
  } else if (req.method === 'POST') {
    const note = req.body;
    const result = await db.collection('notes').insertOne(note);
    res.status(201).json(result.ops[0]);
  } else {
    res.setHeader('Allow', ['GET', 'POST']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

API ini akan mengembalikan semua catatan pada GET dan menambahkan catatan baru pada POST.

6. Membuat User Interface dengan React dan Tailwind CSS

Kita akan membuat halaman utama untuk menampilkan dan menambah catatan. Buat file /pages/index.js dengan kode berikut:

import { useState, useEffect } from 'react';

export default function Home() {
  const [notes, setNotes] = useState([]);
  const [newNote, setNewNote] = useState('');

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

  const addNote = async () => {
    if (!newNote) return;
    const res = await fetch('/api/notes', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ text: newNote }),
    });
    const data = await res.json();
    setNotes([...notes, data]);
    setNewNote('');
  };

  return (
    <>
      
        Catatan Saya
        
           setNewNote(e.target.value)}
          />
          
        
        
          {notes.map((note) => (
            
              {note.text}
            
          ))}
        
      
    </>
  );
}

UI ini sederhana tapi fungsional, memungkinkan Anda menambah dan melihat catatan secara realtime.

7. Menyimpan dan Mengambil Data dari MongoDB

Data catatan disimpan di koleksi notes di MongoDB. Anda dapat melihat data ini di dashboard MongoDB Atlas.

Tampilan dashboard MongoDB Atlas yang menunjukkan koleksi notes dengan beberapa dokumen catatan

Anda juga bisa menggunakan MongoDB Compass untuk mengelola data secara lokal dengan koneksi yang sama.

8. Deploy Proyek ke Vercel

Setelah selesai, Anda bisa deploy aplikasi Next.js ini ke Vercel dengan mudah:

Buka https://vercel.com dan buat akun atau login.
Hubungkan repository GitHub proyek Anda ke Vercel.
Set environment variable MONGODB_URI di dashboard Vercel dengan nilai yang sama seperti di .env.local .
Deploy dan tunggu proses selesai.