GitHub

Cerita di Balik Pembuatan Portfolio Ini (dan Kenapa Akhirnya Pakai Next.js)

#Next.js

Rencana bikin portfolio pribadi ini sebenarnya udah ada dari kapan tau. Tapi tiap mau mulai, ujung-ujungnya selalu males karena mikir, "Ah, palingan cuma jadi web statis yang abis itu nggak pernah di-update lagi."

Sampai akhirnya beberapa minggu lalu, saya mutusin buat beneran belajar Next.js dan langsung sekalian dipraktikin ke project ini. Hitung-hitung dibantuin AI assistant juga buat ngetik kodenya biar cepet kelar. Hasilnya? Nggak cuma jadi halaman profil doang, tapi lumayan komplit ada sistem Blog, TIL (Today I Learned), Guestbook, sampai punya dashboard Admin Studio sendiri buat ngatur kontennya (kayak yang lagi saya pake buat nulis ini!).

Di tulisan pertama ini, saya mau share dikit gimana seru dan pusingnya pas ngebangun web ini.

Kenapa milih Next.js?

Dulu saya biasanya anteng pakai React biasa (Vite). Pas awal-awal pindah ke Next.js (apalagi yang versi App Router), jujur lumayan pusing adaptasinya. Konsep React Server Components (RSC) sama Client Components sempet bikin kepala ngebul:

"Ini kapan sih harus naruh "use client"?"
"Lah, kok state-nya error pas di server?"

Tapi pas udah mulai kebiasa (dan sering minta tolong AI pas lagi stuck), ternyata Next.js ini asik banget. Kita bisa langsung narik data dari database di dalem komponen server, nggak perlu lagi ribet bikin API route terpisah. Efeknya, loading web jadi jauh lebih ngebut karena HTML-nya udah beres dirender di server sebelum nyampe ke browser.

Tech Stack yang Dipakai

Biar kekinian tapi tetep sat-set, saya milih stack ini:

Next.js (App Router): Jelas jadi framework utamanya.
Drizzle ORM + PostgreSQL: Buat nyimpen data. Dulu saya die-hard fans Prisma, tapi abis nyobain Drizzle, langsung pindah haluan. Kerjanya lebih enteng, cepet, dan nulis query-nya berasa kayak nulis SQL beneran.
Tailwind CSS v4: Buat styling biar nggak pusing ngatur kelas CSS manual.
Auth.js (NextAuth): Buat ngurusin login admin sama user yang mau ngisi buku tamu.

Fitur collab: Guestbook

Bagian yang paling seru (tapi sempet tricky) pas ngoding kemaren itu bikin fitur Guestbook. Biar user experience-nya mulus dan nggak nunggu loading muter-muter pas submit pesan, saya ngakalin pake hook useOptimistic bawaannya React.

Gara-gara hook ini, pas ada yang ngirim pesan, teksnya bakal langsung muncul detik itu juga di layar, padahal di background masih proses nyimpen ke database. Kalaupun misalnya error di server, baru deh pesannya ditarik lagi. Trik simpel ini sukses bikin interaksi webnya kerasa jauh lebih hidup dan responsif.

Next Step?

Web ini jelas masih jauh dari kata sempurna. Rencana ke depannya sih pengen:

Ngerajinin nulis TIL (Today I Learned) soal hal-hal baru yang dipelajari pas lagi ngoding.
Nambahin showcase project di halaman Projects.
Ngerapihin SEO sama ngulik optimasi speed-nya lagi.

Thanks buat yang udah mampir dan baca tulisan ini. Jangan lupa drop jejak di Guestbook ya!