Next.js + Supabase: Membangun Portfolio yang Dinamis
tutorial· 4 min read
#nextjs#supabase#portfolio#tailwind
Konsep
Portfolio ini bukan statis — semua project dan blog post diambil dari Supabase (Postgres). Admin bisa tambah/edit/hapus project dan blog lewat dashboard, tanpa touch code.
Stack
- Next.js 15 (App Router) — server components, streaming, ISR
- Supabase — Postgres, Auth, Storage, Realtime
- Tailwind CSS v4 — utility-first styling
- TypeScript — type safety
Data Flow
Server Components
Data di-fetch langsung di server component — tidak ada useEffect untuk data loading. Supabase client dibuat per-request dengan createServerClient.
Gallery System
Project punya array gallery (image paths). Storage bucket images dengan public read. Path konsisten: /images/projects/{slug}/.
Admin Dashboard
CRUD untuk projects dan posts. Upload gambar langsung ke Supabase Storage. Reorder via sort_order column.
Desain
- Notch corners —
clip-pathuntuk identitas visual - Dark theme —
#06070Abackground,#3D7FFFaccent - Dot-grid — subtle pattern di body
- Glass nav —
backdrop-bluruntuk navigation
Portfolio yang baik bukan yang paling rumit, tapi yang paling jujur menunjukkan apa yang bisa kamu buat.
Need something built?
I help teams ship performant, accessible web products — from landing pages to full-stack apps. If you have an idea, let's scope it together.