Belajar Next.js dari Nol – Part 8: Membangun Dashboard Admin & Manajemen Data Dinamis

Berikut lanjutan Belajar Next.js dari Nol – Part 8, yang membahas bagaimana membangun Dashboard Admin untuk mengelola data secara dinamis dan interaktif. Ini adalah salah satu aspek krusial dalam sistem web modern, khususnya untuk aplikasi internal, UMKM, e-commerce, dan aplikasi layanan digital lainnya.

Dashboard admin bukan hanya tempat menampilkan data—ini adalah pusat kendali sistem. Di bagian ini, kamu akan belajar:

• Struktur dashboard modular
• Menampilkan data dari API/database
• Tambah, edit, dan hapus data (CRUD)
• Proteksi halaman admin

---

🎯 Tujuan Part 8

• Membangun layout dashboard admin yang profesional
• Integrasi dengan API untuk CRUD data
• Proteksi halaman admin (autentikasi + otorisasi)
• Optimasi UI/UX dengan komponen reusable

---

🧱 1. Struktur Dasar Dashboard

a. Buat layout dashboard

app/dashboard/layout.jsx

export default function DashboardLayout({ children }) {
  return (
    <div className="flex">
      <aside className="w-64 bg-gray-800 text-white min-h-screen p-4">
        <h2 className="text-2xl font-bold mb-4">Admin Panel</h2>
        <ul>
          <li><a href="/dashboard/users">User</a></li>
          <li><a href="/dashboard/products">Produk</a></li>
        </ul>
      </aside>
      <main className="flex-1 p-6 bg-gray-100">{children}</main>
    </div>
  );
}

b. Gunakan nested routes:

Contoh halaman user: app/dashboard/users/page.jsx

---

🧑‍💻 2. Tampilkan Data dari API

File: app/dashboard/users/page.jsx

'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 (
    <div>
      <h1 className="text-xl font-semibold mb-4">Daftar User</h1>
      <table className="table-auto w-full bg-white shadow-md rounded">
        <thead>
          <tr>
            <th className="p-2">Nama</th>
            <th className="p-2">Email</th>
          </tr>
        </thead>
        <tbody>
          {users.map(u => (
            <tr key={u.id}>
              <td className="p-2">{u.name}</td>
              <td className="p-2">{u.email}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

---

✍️ 3. Fungsi CRUD Lengkap

a. Tambah Data

await fetch('/api/users', {
  method: 'POST',
  body: JSON.stringify({ name, email }),
  headers: { 'Content-Type': 'application/json' }
});

b. Edit Data (via PUT)

await fetch(`/api/users/${id}`, {
  method: 'PUT',
  body: JSON.stringify({ name }),
});

c. Hapus Data

await fetch(`/api/users/${id}`, {
  method: 'DELETE',
});

💡 Gunakan form sederhana atau modal untuk input user.

---

🔐 4. Proteksi Halaman Admin

Gunakan kombinasi autentikasi (NextAuth.js) dan validasi per role di server:

import { getServerSession } from 'next-auth';
import { authOptions } from '@/app/api/auth/[...nextauth]/route';

export default async function DashboardPage() {
  const session = await getServerSession(authOptions);
  if (!session || session.user.role !== 'admin') {
    return <p>Akses ditolak</p>;
  }

  return <p>Selamat Datang di Panel Admin</p>;
}

---

🧠 Tips UX/UI Dashboard

Elemen	Rekomendasi
Sidebar	Navigasi tetap, dengan kategori jelas
Tabel	Responsive, sortable, dengan loading state
Modal	Gunakan untuk edit/tambah data agar tidak reload halaman
Toast/Notif	Tampilkan feedback saat tambah/edit/hapus data
Responsif	Gunakan Tailwind Grid/Flex untuk layout mobile-friendly

---

🎓 Studi Kasus Bisnis

Jika Anda membuat:

• Aplikasi stok barang
• Sistem kasir
• CRM internal
• Portal pengelolaan user

Maka dashboard admin adalah elemen wajib, dan Next.js sangat ideal dengan kemampuannya menangani SSR, proteksi, serta API dalam satu platform.

---

🧰 Elektra Network Vision – Spesialis Dashboard Dinamis

Kami bantu Anda:

• Mendesain dan membangun dashboard custom
• Otentikasi + otorisasi per user/role
• Integrasi dengan database atau API perusahaan

🌐 elektranetworkvision.com — Solusi Next.js & Admin Panel untuk skala UMKM hingga enterprise.