nextjs
Catatan teknis seputar web development, DevOps, dan integrasi AI.
71 artikel
- 16.57testing
Istilah Lama Harus Tetap Pensiun setelah Rebrand
Rename besar bukan satu perintah cari-ganti: tiap permukaan punya aturan aman sendiri, dan legacy-guard test menjaga istilah yang pensiun tidak kembali.
TL;DR: Jadi rename Duta Muda dan Jelajah Kota ke PESONA ternyata bukan cuma cari-ganti biasa, stringnya nempel di banyak tempat kayak metadata SEO, label admin, sama tabel pengaturan. Tiap permukaan beda penanganan, ada yang lewat SQL, ada yang harus cek test assertion biar nggak gagal. Biar istilah lama nggak balik, dipasang negative test yang jalan terus di CI.
#testing#vitest#nextjs - 00.33frontend
Deep-Link Video di Mega Menu: URL, State, dan Preload yang Benar
Mega panel video butuh tiga lapisan URL: path identitas, query state UI, hash timestamp. State video butuh sync manual ke hash. Preload metadata + poster, bukan auto. Prefetch route matikan auto, pakai hover.
TL;DR: Gunakan path URL untuk ID video, query buat state panel, dan hash (#t=) buat timestamp video. Set video preload='metadata' plus poster biar hemat bandwidth, prefetch route pakai hover manual bukan auto. Sinkronin manual currentTime ke hash pas seek biar bookmark dan share tetap work.
#frontend#performance#nextjs - 00.42frontend
Mengapa Kartu Artikel Populer Video Tanpa Thumbnail
Kartu marquee cuma cek thumbnail eksplisit. Video item fallback ke gradient. Fix: rantai thumbnail → i.ytimg hqdefault → gradient. hqdefault selalu ada untuk video publik.
TL;DR: Halaman KotaPortal rusak. Video YouTube cuma tampil gradient biru-ungu. Sekarang sudah diperbaiki dengan rantai fallback.
#frontend#performance#nextjs - 00.34frontend
Mengapa Marquee Populer Tiga Pilar Kosong — dan Cara Mengisinya
Marquee populer 3 pilar (olahraga/kebudayaan/kepemudaan) kosong di pilar muda. Fix: parallel fetch popular + random, mergePopularWithRandom dedupe by id, popular priority, slice 9.
TL;DR: Pilar muda di KotaPortal punya marquee setengah kosong. Perbaikan dilakukan dengan parallel fetch dan merge dedupe. Marquee sekarang selalu penuh 9 item.
#frontend#performance#nextjs - 21.51frontend
Membelah Grid: Halaman Pertama Server, Sisanya Klien
Grid entitas pilar yang menahan render halaman terlalu lama. Halaman pertama tetap dirender server, sisanya pindah ke island klien.
TL;DR: Halaman profil pilar lambat karena request data yang lambat. Menaikkan limit tidak mempercepat apa pun. Sekarang, delapan kartu pertama dikirim sebagai HTML dan sisanya sebagai JSON.
#nextjs#react#pagination - 08.50frontend
Satu Direktif yang Menandai Seluruh Modul, Bukan Cuma Komponen
Impor fungsi bantu dari file bertanda modul klien menghasilkan referensi, bukan fungsi. Error runtime dan pola modul netralnya.
TL;DR: Error "is not a function" muncul di halaman /budaya. Fungsi toVideoItems tidak bisa dipanggil dari server karena diekspor dari modul klien. Modul netral tanpa direktif bisa menyelesaikan masalah ini.
#nextjs#react#typescript - 18.55frontend
Satu Template Rute Entitas untuk Semua Bidang di Next.js
Tiga salinan rute entitas ditebang jadi satu set views terparameterisasi: registry pillar, rute tipis per bidang, dan canonical yang mengikuti base modul.
TL;DR: Laporan masuk tentang link bidang yang salah. Pemeriksaan menemukan pola sistemik yang salah. Refactor dilakukan untuk memperbaiki pola tersebut.
#nextjs#routing#app-router - 19.14frontend
Memindahkan Section Antar Halaman di Next.js App Router
Section UI tidak pernah pindah sendirian di App Router: jalur fetch, fallback, dan pembersihan jalur data mati harus ikut berpindah.
TL;DR: Section hero lama dipindahkan ke halaman pariwisata. Data section tidak ikut pindah karena dilapari oleh fetch di halaman utama. Fetch dipindahkan ke halaman pariwisata untuk memperbaiki masalah.
#nextjs#react#app-router - 13.06frontend
Nama Grup Navigasi yang Hanya Masuk Akal bagi Penulis Kodenya
Nama grup navigasi yang mengikuti batas modul hanya masuk akal bagi penulis kodenya. Regroup mengikuti tugas operator.
TL;DR: Sidebar akun operator bidang terlalu panjang dan tercampur. Operator harus memahami cara sistem bekerja untuk menggunakan sidebar dengan efektif. Perancang harus mempertimbangkan mental model pengguna saat merancang sistem.
#ux#information-architecture#navigation