nextjs
Catatan teknis seputar web development, DevOps, dan integrasi AI.
71 artikel
- 18.36testing
Crawler 192 Halaman, Satu 404, dan Sitasi yang Salah Sasaran
Audit tautan internal lewat crawler Playwright: 192 halaman dirayapi, satu dynamic404, dan rujukan next.js#58421 yang ternyata PR polyfill.
TL;DR: Crawler ngecek 192 halaman, cuma satu 404 dinamis gara-gara slug ada tanda kutip satu. Rujukan issue di commit ternyata salah sasaran, akar masalahnya sih double-encoding dari encodeURIComponent. Pelajarannya, referensi di catatan kerja itu cuma hipotesis, mesti dicek dulu sebelum dipercaya.
#playwright#e2e#nextjs - 04.22backend
GraphQL dari Bundle Situs: 7 Permintaan Ganti 533 Halaman
Menemukan endpoint GraphQL situs dari bundle JS publik: dataset 5330 baris cukup 7 permintaan, bukan 533 halaman HTML.
TL;DR: Awalnya penulis kira harus scraping 533 halaman HTML tiap hari, ternyata dugaan itu meleset total. Setelah intip file JavaScript situsnya, ketemu API GraphQL GetBlacklists yang bisa ambil data tanpa login sama sekali. Cuma butuh 7 request sekitar 10 detik buat dapetin 5330 baris, parsing HTML pun langsung dipensiunkan deh.
#scraping#graphql#nextjs - 22.29testing
Hari Pertama Pasang Vitest, Langsung Ketahuan Dua Bug
Harness test pertama di frontend Next.js: 12/12 ijo tapi dua bug ketahuan pas nulisnya, satu nama klien dobel dan satu blind spot glob di build gate.
TL;DR: Awalnya repo Next.js jalan tanpa tes, pas pasang vitest dan nulis dua belas tes semua ijo. Tapi pas nulisnya malah ketahuan dua bug, ada nama klien dobel di beda grup industri dan gate validate-tokens yang kelewat file langsung di dalam src. Jadi intinya pasang tes jangan telat, justru pas nulis itulah bug kelihatan.
#vitest#testing#git - 17.09frontend
Matikan Fetch, Bukan Sekadar Sembunyikan UI
Section review disembunyikan tapi fetch-nya tetap jalan dan menabrak 404 di tiap page view. Flag yang benar mematikan jaringan dulu, baru piksel.
TL;DR: Gue kira cukup sembunyiin UI rating pas dimatiin eh ternyata server tetep nge-fetch dan hasilnya 404 terus jadi ngebombardir log. Ternyata rating_enabled itu soal kesepakatan data bukan cuma saklar tampilan jadi kalau false ya nggak usah fetch sama sekali. Akhirnya gue benerin pake cek rating_enabled !== false sebelum fetch dan unmount komponennya biar bersih total.
#react#nextjs#feature-flag - 10.47frontend
Pindah Route /wisata: 308, Menu Tak Tertimpa
Rename route publik itu tiga langkah sekaligus: pindah folder route, redirect 308, dan migrasi baris menu yang hormati editan admin.
TL;DR: Kukira mindahin route wisata ke pariwisata tinggal git mv doang, ternyata harus tiga hal bareng biar nggak berantakan. Di Nextjs dipasang redirect 308 wildcard jadi bookmark lama tetap nyambung tanpa ngubah method POST. Di database migrasi cuma geser data menu yang masih bawaan, yang udah diedit admin nggak ditimpa.
#nextjs#redirect#mysql - 08.57frontend
Sidebar Admin Per-Modul: Ilusi Aman di UI, Sejati di API
Menyembunyikan menu di sidebar admin bukan otorisasi. Pengalaman membangun halaman konten per-modul dengan sidebar ter-scope bidang.
TL;DR: Awalnya ngira cukup sembunyiin menu sidebar biar aman, ternyata itu cuma kosmetik doang. Soalnya cek di layout Nextjs bisa basi dan gampang dibobol lewat manipulasi URL manual. Akhirnya solusinya dobel lapis, frontend cuma buat UX, backend pakai NarrowModules yang balikin list kosong biar nggak bocorin info.
#nextjs#react#go - 17.38frontend
Migrasi Daftar Klien dari Gambar ke Data-Driven di Next.js
242 nama klien tadinya cuma hidup di dalam gambar. Kini mereka keindeks mesin pencari, kebaca screen reader, dan totalnya dihitung dari datanya.
TL;DR: Dulu daftar 242 klien cuma nempel di satu gambar gede jadi nggak bisa dicopy atau keindeks Google. Akhirnya semua nama dipindah ke kode TypeScript jadi teks asli yang kebaca mesin pencari dan screen reader. Gambar logo tetap dipajang buat visual tapi sekarang ada transkrip teksnya biar tetap sesuai aturan WCAG.
#nextjs#seo#accessibility - 11.21frontend
12 Commit Cuma Buat Nempel Badge di Dada Maskot
Tantangan teknis menempatkan badge ISO pada maskot: positioning, border-radius, dan animasi CSS yang tidak saling menimpa.
TL;DR: Nempel badge di maskot ternyata nggak semudah itu, butuh 12 commit gara-gara anchor absolute positioning-nya ngaco. Solusinya bungkus artwork pakai wrapper relative w-fit biar badge nggak ikut geser pas ukuran layar berubah. Badge juga sempat lonjong gara-gara rounded-full di kotak non-persegi, untung centering pakai translate Tailwind v4 aman dari keyframe animasi.
#css#tailwind#nextjs - 10.20frontend
Ilustrasi Flat Jadi Becek: Saya Matikan Optimasi Gambar Next.js
Konversi WebP lossy ternyata merusak artwork flat-color: satu properti unoptimized mengembalikan ketajaman file aslinya.
TL;DR: Artwork flat-color di Next.js jadi becek gara-gara pipeline Image pakai WebP lossy quality 75, outline gemuk dan muncul gradasi palsu. Solusinya cuma nambah properti unoptimized di slot hero, file asli 170 KB disajikan tanpa diotak-atik. Pelajarannya: foto boleh dioptimasi, aset flat mending dibiarkan apa adanya atau pakai lossless.
#nextjs#next-image#webp