frontend

Root layout yang pindah ke segmen [locale] membuat html lang benar dari server, menghapus bootstrap bahasa di klien, dan meloloskan audit struktur 24 halaman.

TL;DR: Gue awalnya kira skrip deteksi bahasa di klien yang salah, ternyata konsepnya emang nggak bener: html lang harus diset dari server. Solusinya simpel, cukup pindah root layout ke folder app/[lang] terus hapus skripnya. Hasilnya? 24 halaman lolos audit dan screen reader baca konten dengan pelafalan yang bener sejak awal.

Satu helper pageMetadata plus metadataBase dan JSON-LD LocalBusiness menutup canonical, hreflang, dan kartu sosial untuk seluruh route Next.js.

TL;DR: Jadi gitu, satu commit soal metadata bikin 16 route bilingual lolos audit SEO tanpa temuan. Ternyata rahasianya tiga lapis: canonical dan hreflang yang saling nunjuk, metadataBase buat rapiin URL, plus JSON-LD biar Google tahu ini bisnis beneran. Semuanya dikonsolidasi ke satu helper, jadi nambah route baru tinggal panggil fungsi, beres.

Bikin locale switcher Next.js App Router yang preserve current path pakai usePathname dan regex swap, plus active state accessible dengan aria-current.

TL;DR: Locale switcher yang cuma link ke homepage bikin visitor kehilangan konten pas ganti bahasa. Solusinya pakai usePathname plus regex buat swap prefix locale, jadi /en/about tetep nyampe ke /id/about. Jangan lupa aria-current buat active state, dan kalo project makin ribet, pindah aja ke next-intl.

Halaman /en/about tetap bahasa Indonesia padahal build hijau: komponen page sinkron yang mengabaikan params. Perbaikannya begitu sederhana setelah kelihatan.

TL;DR: Build hijau bukan jaminan konten bener—empat page di app/[locale] masih return konten id hardcoded soalnya nggak baca params. Fix-nya: page jadi async, await params, map konten per locale, plus guard hasLocale biar locale aneh dapat 404, bukan fallback senyap. generateStaticParams cukup sekali di root layout biar rute EN ke-prerender pas build.

Fiord bikin peta gelap tapi datar. Saya mutasi style JSON-nya langsung di runtime: brightness ladder per layer, label terang ber-halo, plus guard anti-flash.

TL;DR: Fiord dark mode bikin jalan semua abu-abu sama, susah dibaca. Akhirnya fetch JSON Fiord, ubah paint 28 layer bikin tingkatan kecerahan jalan plus label pake halo gelap biar kelihatan kaya Google Maps. Pake cache, show peta dulu baru upgrade style, plus guard biar toggle cepat nggak bikin peta acak-acakan.

Basemap CARTO tiba-tiba wajib API key dan peta proyek saya penuh watermark. Ini cerita migrasi tiga komponen Leaflet ke MapLibre GL dengan tile OpenFreeMap.

TL;DR: Basemap CARTO tiba-tiba wajib API key, jadi semua tile peta ketutup watermark abu-abu. Daripada ngurusin kuota, saya pindah ke OpenFreeMap yang gratis tanpa key dan migrasi semua komponen Leaflet ke MapLibre GL. Style dark bawaannya kontrasnya hampir nol, akhirnya diganti fiord biar peta kebaca lagi.

Sidebar sticky yang gagal tanpa satu baris error: stretch flexbox makan ruang scroll, offset top ketutup header, dan ancestor ber-overflow.

TL;DR: Sticky sidebar gue nggak jalan gara-gara tiga hal: flexbox stretch bikin parent sedinggi viewport, top-0 nyangkut di balik header fixed, dan ada ancestor overflow-hidden yang motong. Fix-nya cuma items-start plus offset 55px yang disesuaikan tinggi header. Sekarang tiap pasang sticky, gue selalu cek inset, ruang scroll parent, dan rantai ancestor-nya.

Warna entri AI di navbar saya bergeser begitu urutan menu berubah. Pelajaran soal penugasan warna pakai modulo index dan fix berbasis identitas data.

TL;DR: Warna entri "Tanya AI" di navbar bergeser ternyata karena aksen dihitung pakai modulo index array, bukan bug tema. Perbaikannya mempin warna ke identitas href, plus menambah pill state idle supaya entri khusus beda bentuk sekaligus warna sesuai WCAG. Pelajarannya: identitas visual sebaiknya terikat data, bukan urutan render.

Pill konsultasi WhatsApp dihapus dari header dan fitur Tanya AI naik jadi entri navigasi. Pelajaran soal kontrak tempat CTA eksternal versus fitur internal.

TL;DR: Pill konsultasi WhatsApp dihapus dari header karena hanyalah aksi sekali-pakai, bukan fitur permanen. Perannya digantikan entri Tanya AI di navigasi utama, cukup ditambahkan lewat navbar.json dan label dua bahasa via next-intl. Pelajarannya: fitur masuk menu, aksi jadi tombol kontekstual di halaman relevan, jangan tumpuk semuanya di header.