Mengubah Halaman Portofolio Sederhana Menjadi Aplikasi CMS Terintegrasi

Proyek ini awalnya bermula dari kebutuhan yang sangat sederhana: saya membutuhkan sebuah website portofolio personal untuk memamerkan proyek-proyek kuliah dan latihan mandiri saya. Pada mulanya, saya berpikir untuk membuatnya menggunakan template HTML statis atau sekadar menggunakan Next.js statis di mana setiap data proyek saya hardcode langsung ke dalam komponen React.

Namun, jiwa ngulik saya berontak. "Kenapa tidak sekalian saya jadikan ini sebagai sarana belajar backend secara nyata?" pikir saya. Dari situlah, proyek sederhana ini bermutasi menjadi sebuah sistem CMS (Content Management System) portofolio yang terintegrasi penuh.

Berikut adalah beberapa pelajaran berharga yang saya dapatkan selama proses "mutasi" proyek ini:

1. Pentingnya Batasan Arsitektur (Server vs. Client Component)

Bekerja dengan Next.js App Router memaksa saya untuk benar-benar memahami kapan harus menggunakan Server Component dan kapan harus menggunakan Client Component.

• Halaman publik (seperti artikel blog ini atau daftar proyek) saya rancang menggunakan Server Component agar proses rendering terjadi di server, menghasilkan performa load halaman yang sangat cepat serta optimasi SEO yang maksimal.
• Sementara itu, form kontak interaktif atau form CRUD di dashboard admin menggunakan Client Component karena memerlukan interaksi langsung dari pengguna (seperti validasi input secara real-time).

2. Validasi Data yang Tangguh Menggunakan Zod & React Hook Form

Di masa lalu, saya sering melakukan validasi form secara manual dengan if-else yang bertumpuk-tumpuk—sebuah cara yang sangat tidak efisien dan rentan bug. Dalam proyek CMS ini, saya mengadopsi kolaborasi antara React Hook Form dan Zod Schema Validation. Hasilnya sangat luar biasa:

• Struktur kode form admin menjadi jauh lebih bersih.
• Validasi tipe data (seperti format email, panjang minimal password, dan keharusan mengunggah thumbnail proyek) ditangani secara deklaratif.
• Eror dari sisi server dapat dipetakan langsung ke input field yang bersangkutan di sisi client dengan mudah.

3. Mengelola Database Relasional dengan Prisma & PostgreSQL

Sebagai developer yang terbiasa dengan relasi data sederhana, menggunakan Prisma ORM sangat membantu dalam mendefinisikan schema database portofolio ini. Saya belajar menyusun relasi antartabel (seperti akun user dengan session, tag-tag pada proyek, dan kontak masuk), melakukan migrasi skema secara aman, serta mempopulerkan database menggunakan skrip seeder.

4. Tantangan Keamanan dengan Auth.js (NextAuth)

Melindungi dashboard admin agar tidak dapat diakses sembarang orang merupakan prioritas utama saya saat mengubah portofolio ini menjadi CMS. Saya mengimplementasikan Auth.js (Beta) dengan strategi sesi JWT (JSON Web Token). Mengamankan route admin melalui middleware Next.js memberikan saya pemahaman praktis tentang alur kerja autentikasi modern, pengelolaan cookie, dan pencegahan akses tidak sah (unauthorized access).

Refleksi Akhir

Evolusi dari portofolio statis menjadi CMS dinamis ini mengajarkan saya satu hal penting: jangan pernah takut mempersulit diri dalam belajar. Dengan menolak jalan pintas yang mudah, saya berhasil mendapatkan pemahaman full-stack yang jauh lebih mendalam dan memiliki sebuah portofolio yang dapat saya jelaskan setiap baris kodenya dengan penuh rasa bangga.