Next.js: Menghubungkan Next.js dengan MySQL Menggunakan Sequelize

Buat proyek Next.js baru dengan menggunakan perintah berikut di terminal:

npx create-next-app nama-proyek
cd nama-proyek

Instal Dependencies

Instal beberapa dependensi yang diperlukan untuk berinteraksi dengan MySQL dan melakukan operasi CRUD:

npm install mysql2 sequelize

Buat Konfigurasi Database

Buat file konfigurasi untuk koneksi database. Buat folder baru bernama config di dalam folder proyek, dan buat file database.js di dalamnya. Isi file tersebut dengan kode berikut:

// config/database.js

const { Sequelize } = require('sequelize');

const sequelize = new Sequelize(
  'nama_database', 
  'username_mysql', 
  'password_mysql', 
  {
    host: 'localhost',
    dialect: 'mysql',
  }
);

module.exports = sequelize;

Pastikan untuk mengganti nama_database, usename_mysql, dan password_mysql dengan informasi yang sesuai untuk koneksi database Anda.

Buat Model User

Buat folder baru bernama modelsdi dalam folder proyek, dan buat file user.jsdi dalamnya. Isi file tersebut dengan kode berikut:

// models/user.js

const { DataTypes } = require('sequelize');
const sequelize = require('../config/database');

const User = sequelize.define('User', {
  id: {
    type: DataTypes.INTEGER,
    primaryKey: true,
    autoIncrement: true,
  },
  name: {
    type: DataTypes.STRING,
    allowNull: false,
  },
  email: {
    type: DataTypes.STRING,
    allowNull: false,
  },
  // Tambahkan kolom lain sesuai kebutuhan
});

module.exports = User;

Implementasi CRUD di Halaman Next.js

Sekarang, mari buat halaman Next.js untuk menampilkan daftar pengguna, menambahkan pengguna baru, mengedit pengguna, dan menghapus pengguna. Buat file users.js di dalam folderpages dengan kode berikut:

// pages/users.js

import { useEffect, useState } from 'react';
import axios from 'axios';

const Users = () => {
  const [users, setUsers] = useState([]);
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

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

  const getUsers = async () => {
    try {
      const response = await axios.get('/api/users');
      setUsers(response.data);
    } catch (error) {
      console.error(error);
    }
  };

  const handleCreateUser = async () => {
    try {
      await axios.post('/api/users', { name, email });
      getUsers();
      setName('');
      setEmail('');
    } catch (error) {
      console.error(error);
    }
  };

  const handleDelete = async (id) => {
    try {
      await axios.delete(`/api/users/${id}`);
      getUsers();
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div>
      <h1>Daftar Pengguna</h1>
      <form onSubmit={handleCreateUser}>
        <input
          type="text"
          placeholder="Nama"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
        <input
          type="email"
          placeholder="Email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        <button type="submit">Tambah Pengguna</button>
      </form>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            {user.name} - {user.email}
            <button onClick={() => handleDelete(user.id)}>Hapus</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Users;

Buat API Routes untuk CRUD

Selanjutnya, buat folder api di dalam folder proyek dan buat file users.jsdi dalamnya untuk menangani permintaan CRUD:

// pages/api/users.js

import dbConnect from '../../config/database';
import User from '../../models/user';

dbConnect();

export default async function handler(req, res) {
  if (req.method === 'GET') {
    try {
      const users = await User.findAll();
      res.status(200).json(users);
    } catch (error) {
      res.status(500).json({ message: 'Internal Server Error' });
    }
  } else if (req.method === 'POST') {
    const { name, email } = req.body;
    try {
      const user = await User.create({ name, email });
      res.status(201).json(user);
    } catch (error) {
      res.status(500).json({ message: 'Internal Server Error' });
    }
  } else if (req.method === 'DELETE') {
    const { id } = req.query;
    try {
      await User.destroy({ where: { id } });
      res.status(200).json({ message: 'User deleted successfully' });
    } catch (error) {
      res.status(500).json({ message: 'Internal Server Error' });
    }
  }
}

Pastikan kode di atas sudah mengikuti konfigurasi database yang sudah dibuat di database.jsdan model user.js.

Jalankan Aplikasi

Terakhir, jalankan aplikasi Next.js dengan menggunakan perintah berikut:

npm run dev

Buka browser dan akses http://localhost:3000/users untuk melihat halaman daftar pengguna.

Sekarang, Anda telah berhasil membuat aplikasi Next.js dengan fitur CRUD untuk mengelola daftar pengguna dengan menggunakan MySQL sebagai database. 😃

Mari terhubung bersama saya..
LinkedIn: https://www.linkedin.com/in/afzn00/
Github: https://github.com/ahmfzn00