nextjs

React 19 men-flag setiap script tag di komponen, termasuk script anti-FOUC next-themes yang sebenarnya jalan normal. Cara saya membungkamnya di dev saja.

TL;DR: Pas naik ke Next.js 16, next-themes bikin error merah soal script tag di komponen React, padahal dark mode jalan normal. Ternyata cuma false positive, script anti-FOUC-nya tetap jalan, React 19 emang warning semua script inline tanpa mikir konteks SSR. Solusinya gampang, tinggal filter console.error khusus dev buat abaikan pesan itu, kayak trik shadcn/ui.

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.

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.

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.

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.

Menyembunyikan footer di halaman chat tanpa mengorbankan rendering server, lewat pola komposisi resmi Next.js App Router.

TL;DR: Halaman chat /ai butuh tampilan bersih tanpa footer, tapi menyembunyikannya lewat CSS cuma menutupi masalah, dan menurunkan seluruh layout ke client terlalu boros. Solusinya pola komposisi Next.js: komponen client kecil bernama ConditionalFooter memeriksa usePathname lalu return null di rute /ai. Footer tetap Server Component penuh karena diselundupkan sebagai children, bukan dirombak jadi client.