mihdan.my.id — Portofolio Next.js 16 + Hygraph di Cloudflare Workers
Ini situs yang sedang kamu buka: portofolio sekaligus blog pribadi saya. Versi pertamanya saya mulai pada Agustus 2025 dengan Next.js dan Hygraph sebagai headless CMS. Sekarang tulisan, proyek, foto profil, sampai galeri semuanya diatur dari dasbor Hygraph, tanpa perlu mengubah kode.
Pada November 2026 situs ini saya rombak. Tampilan beranda, halaman tentang, dan artikel dibuat senada, antarmukanya tersedia dalam dua bahasa, dan hosting-nya pindah ke Cloudflare Workers lewat adapter OpenNext. Halaman dirender sekali, disajikan dari cache, lalu diperbarui otomatis tiap 60 detik (ISR), jadi konten baru dari Hygraph ikut tampil tanpa perlu deploy ulang.
Fitur Utama
- Tulisan & proyek: daftar isi otomatis, estimasi waktu baca, bilah progres baca, dan blok kode berwarna dengan tombol salin.
- Dua bahasa (ID/EN): kedua versi teks antarmuka ikut dirender, lalu CSS menampilkan salah satunya. Ganti bahasa jadi instan, pilihannya diingat browser, dan halaman tetap bisa di-cache.
- Galeri foto: beranda menampilkan beberapa foto berpotongan kotak yang rata, sedangkan halaman Galeri punya filter landscape/potret, kolase masonry, dan lightbox yang bisa digeser dengan tombol panah.
- Terminal kontak: pengunjung bisa mengetik perintah seperti
help,skills, ataucontact. Form kontaknya cukup membuka aplikasi email (mailto), jadi tidak butuh server tambahan. - Kocok tulisan: tombol di beranda yang memilih satu tulisan acak dengan efek mesin slot singkat.
- SEO & keamanan: metadata Open Graph, data terstruktur JSON-LD, sitemap, serta header keamanan seperti Content-Security-Policy, HSTS, dan Permissions-Policy.
Di Balik Layar
Situs ini dibangun dengan Next.js 16 (App Router), React 19, TypeScript, dan Tailwind CSS 4, sementara datanya diambil dari Hygraph lewat GraphQL. Saat build, OpenNext mengubah aplikasinya menjadi satu Worker. Aset statis dilayani langsung dari edge Cloudflare, cache ISR disimpan di R2, antrean revalidasinya memakai Durable Object, dan gambar dioptimalkan lewat Cloudflare Images. Setiap push ke branch main otomatis di-build dan di-deploy oleh Workers Builds.
Tantangan
Bagian tersulitnya justru saat pindah ke Cloudflare. Build pertama gagal, www.mihdan.my.id sempat error 522, dan http belum otomatis dialihkan ke https. Paket gratis Workers juga hanya memberi CPU sekitar 10 ms per request, jadi hampir semua halaman sengaja dirender sekali lalu disajikan dari cache. Langkah dan perbaikannya saya tulis lengkap di blog.
🔗 Live: mihdan.my.id
👉 Baca cerita deploy-nya: Deploy Next.js ke Cloudflare Workers dengan OpenNext: dari Build Gagal sampai Live