Blog
Catatan teknis seputar web development, DevOps, dan integrasi AI.
504 artikel
- 17.22backend
Bukan Sekadar SQL: Saat API Fan-out Bikin Monitor Mati
Perbaikan N+1 di commitcheck: satu kali paginasi gantikan 250 request, timeout SSL hilang dan eksekusi turun ke 27,5 detik.
TL;DR: Awalnya dikira jaringan lemot, ternyata script nge-loop paginasi tiap kandidat jadi 250 request numpuk dan bikin timeout. Solusinya males tapi ngaruh, paginasi cukup sekali di awal terus dibikin kamus biar tinggal cek aja. Habis di-patch requestnya anjlok drastis dan waktu eksekusi turun dari dua menitan jadi cuma 27 detik.
#pagination#performance#api - 15.29seo
Peta Redirect WordPress ke Next.js di Vercel Tanpa Bocor SEO
Migrasi 21 URL WordPress lama ke Next.js di Vercel tanpa bocor SEO: peta redirect 308 di vercel.json agar trafik lama tidak 404 dan sinyal kanonis tetap utuh.
TL;DR: Gue migrasi WordPress ke Vercel tapi 21 URL lama jadi 404 dan bikin link equity bocor. Akhirnya gue bikin 21 redirect permanen 308 di vercel json soalnya diproses di Edge dan nggak bebani aplikasi. Gue juga benerin canonical yang sebelumnya muter balik biar nggak looping dan Google bisa baca kanonisnya dengan jelas.
#vercel#nextjs#seo - 14.55frontend
Ketika Pindah Root Layout Next.js, Tailwind Tiba-tiba Hilang
Satu baris import CSS yang tertinggal saat root layout pindah ke app/[locale] bikin semua halaman tanpa styling sama sekali — dan build tetap hijau.
TL;DR: Habis mindahin layout ke folder [locale] buat i18n, tampilan web jadi berantakan kayak HTML polosan. Ternyata penyebabnya sepele, lupa mindahin import globals css yang isinya @import tailwindcss jadi stylenya nggak keload sama sekali. Build tetap lolos tanpa error jadi ngecoh, padahal cukup cek grep globals css sebelum commit biar nggak buang waktu debugging.
#nextjs#tailwindcss#css - 14.35seo
Menambahkan llms.txt di Next.js App Router Tanpa Konten Drift
Dua route handler llms.txt untuk situs bilingual Next.js App Router, konten digenerate dari modul yang sama dengan halaman supaya nggak drift.
TL;DR: Biar situsnya bilingual, gw bikin dua route handler buat serve llms.txt per bahasa, bukan file statis yang cuma bisa satu bahasa. Isinya auto-generate dari data yang sama persis sama halaman, jadi dijamin nggak pernah beda cerita alias zero drift. Search engine sih masih cuek, tapi coding agent dan tool IDE tuh konsumen utamanya.
#nextjs#llms-txt#aeo - 13.43frontend
Root Layout di [locale]: html lang Server-Rendered Next.js
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.
#nextjs#i18n#html - 13.23frontend
Metadata SEO Next.js App Router: Canonical, Hreflang, JSON-LD
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.
#nextjs#seo#i18n - 11.33frontend
Locale Switcher Next.js yang Nggak Bikin Visitor Tersesat
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.
#nextjs#i18n#accessibility - 10.59frontend
Bug /en/about: Halaman EN Merender Konten ID di Next.js
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.
#nextjs#i18n#routing - 09.07ai
Satu File, Dua Mode: Kenapa Saya Batal Bikin Panduan Terpisah
Sumber artikel nggak menentukan jenisnya, isi brief yang menentukan. Deteksi mode dari konten, satu guide kanonik, tanpa duplikasi enforcement.
TL;DR: Awalnya gue mau bikin dua file prompt terpisah buat artikel teknis dan non-teknis, ternyata salah besar karena jenis artikel ditentukan isi brief, bukan sumbernya. Solusinya satu guide dua mode, dideteksi dari konten. Kayak feature detection ala MDN, lebih andal daripada nebak dari asal sumber.
#ai#writing#tooling