Portfolio

Portfolio ini sendiri: situs Next.js dwibahasa dengan admin dashboard sendiri, dibangun untuk mengelola proyek, sertifikat, dan pesan tanpa pernah menyentuh kode atau deploy ulang.

Dwibahasa dan Tema

Setiap rute berprefiks locale (/en/..., /id/...) lewat next-intl, dengan paritas key terjemahan penuh antara Inggris dan Indonesia yang dijaga lewat konvensi, bukan tooling. Ganti bahasa adalah transisi client-side, bukan reload, dan sengaja mempertahankan posisi scroll: bug yang diperbaiki setelah menelusuri kenapa halaman terasa lompat saat ganti locale. Next.js me-reset scroll ke atas di setiap navigasi secara default; perbaikannya cuma satu opsi, scroll: false.

Tema, gelap sebagai default dengan terang tersedia, ditangani next-themes tanpa fallback preferensi sistem. Artinya tidak ada flash tema salah saat render pertama dan tidak bergantung pada setelan OS pengunjung.

Performa, SEO, dan Loading States

Setiap rute dan setiap gambar punya loading state skeleton: loading.tsx per rute, plus wrapper ImageWithSkeleton di sekitar next/image, menggantikan spinner yang dulu dipakai. Wrapper itu ada karena kasus nyata: gambar dari cache bisa selesai load sebelum listener onLoad React sempat terpasang, jadi komponennya juga memeriksa .complete langsung saat mount sebagai fallback.

SEO ditangani per halaman: metadata dan OG image unik per rute per locale, sitemap.xml, robots.txt, dan tag hreflang yang menautkan versi EN dan ID setiap halaman. Ini sudah diukur, bukan diasumsikan. Audit Lighthouse mobile mencatat skor 99 untuk Performance dan 100 masing-masing untuk Accessibility, Best Practices, dan SEO.

Build production berjalan lewat Webpack, bukan Turbopack default Next.js 16. Audit menemukan output production Turbopack memuat sekitar 18 KB polyfill browser lama ke setiap pengunjung lewat tag <script> biasa. Webpack memuat fallback yang sama di balik <script nomodule>, sehingga browser modern, lebih dari 99% trafik, melewatinya sepenuhnya.

Keamanan dan Rate Limiting

Contact form dan tombol Love keduanya dibatasi laju per IP dengan sliding window in-memory, sehingga keduanya tidak bisa dibanjiri untuk spam ke database. Setiap input divalidasi dengan Zod di client, untuk feedback cepat, dan di server, batas yang benar-benar penting, karena pemeriksaan di client saja selalu bisa dilewati. Pesan dari contact form dirender sebagai teks biasa, tidak pernah lewat dangerouslySetInnerHTML, sehingga pesan tidak bisa menyisipkan markup ke inbox admin.

Alur Kerja

Pengerjaan situs ini dilacak di Notion, tugas demi tugas, masing-masing membawa checklist "selesai bila" yang eksplisit sebelum ditandai tuntas. Disiplin itu ada karena satu alasan: proyek ini pernah mangkrak sekali, dikerjakan tanpa batas scope sama sekali.

Satu-satunya kali data harus dipindahkan di luar aplikasi yang berjalan itu sendiri, migrasi data proyek dan sertifikat asli dari project Supabase development ke production, dijalankan sepenuhnya lewat command line: pg_dump dialirkan ke psql untuk baris database, rclone untuk file storage, keduanya diinstal lokal lewat Homebrew. Migrasi itu sama sekali tidak menyentuh aplikasi yang di-deploy; itu operasi sekali jalan, bukan dependency situs ini.

Tumpukan Teknologi

Keputusan Arsitektur yang Perlu Dicatat

• Tanpa API layer terpisah. Baca lewat Server Components langsung ke Prisma; tulis lewat Server Actions. REST layer hanya akan menambah lapisan tanpa konsumen di luar aplikasi ini.
• Dua database, bukan satu. Development dan production berjalan di dua project Supabase terpisah, sehingga kredensial dev yang bocor, atau reset seed lokal yang tidak sengaja, tidak pernah bisa menyentuh data pengunjung asli.
• Data selalu segar tanpa rebuild penuh. Halaman berbasis database memakai revalidasi berbasis waktu, dan setiap operasi tulis admin memanggil revalidatePath() untuk rute yang terdampak, sehingga perubahan yang dibuat di dashboard langsung terlihat di situs publik pada request berikutnya, bukan menunggu deploy berikutnya.

Tautan

• Situs live: fatihaljabar.com
• Source code: github.com/fatihaljabar/portfolio