Jadi ceritanya aku lagi asik-asiknya bikin halaman blog di portfolio. Semuanya jalan lancar — sampai aku sadar ada yang aneh.
Di halaman /en, link ke artikel blog mengarah dengan benar ke /en/blogs/nama-artikel. Tapi begitu aku buka /en/blogs, link yang sama malah mengarah ke /en/en/blogs/nama-artikel. Ada /en yang dobel. Aneh banget.
Investigasi
Aku mulai curiga di komponen Blog — khususnya bagian href-nya:
<Link href={`${lang}/blogs/${blog.slug}`}>{blog.frontmatter.title}</Link>Kelihatannya normal. Tapi setelah aku perhatikan lagi, ternyata tidak ada / di depan. Aku ubah jadi:
<Link href={`/${lang}/blogs/${blog.slug}`}>{blog.frontmatter.title}</Link>Dan langsung fixed. Sesederhana itu. Tapi kenapa?
Kenapa Ini Terjadi?
Ternyata ini bukan bug Next.js — ini perilaku standar URL yang sudah ada sejak lama.
Tanpa / di depan, browser memperlakukannya sebagai relative path — path yang dihitung relatif terhadap URL halaman saat ini.
URL saat ini: /en
href: en/blogs/artikel
hasil: /en/blogs/artikel ✅
URL saat ini: /en/blogs
href: en/blogs/artikel
hasil: /en/blogs/en/blogs/artikel ❌
Sedangkan dengan / di depan, browser memperlakukannya sebagai absolute path — selalu dihitung dari root, tidak peduli halaman mana yang sedang dibuka.
URL saat ini: /en → /en/blogs/artikel ✅
URL saat ini: /en/blogs → /en/blogs/artikel ✅
URL saat ini: /en/projects → /en/blogs/artikel ✅
Apakah Dokumentasi Next.js Menyebutkan Ini?
Aku langsung cek dokumentasi Next.js. Dan jawabannya — tidak secara eksplisit.
Dokumentasi Next.js di bagian <Link> hanya menunjukkan contoh dengan absolute path seperti /about, /blog/post, tanpa pernah secara khusus memperingatkan tentang bahaya relative path. Perilaku ini dianggap sudah dipahami sebagai standar web — bukan sesuatu yang perlu dijelaskan ulang.
Jadi kalau kamu mengharapkan Next.js yang akan mengingatkan kamu soal ini — tidak akan. Ini murni pengetahuan dasar URL yang ternyata masih bisa bikin kita kecolongan, terutama saat kita sedang fokus ke hal lain.
Pelajaran yang aku ambil: kalau ada dynamic segment seperti lang di URL, selalu gunakan absolute path.
// ❌ jangan
href={`${lang}/blogs/${slug}`}
// ✅ selalu
href={`/${lang}/blogs/${slug}`}Dan untuk komponen global atau reusable yang bisa dipakai di berbagai halaman — pastikan semua href yang masuk selalu diawali dengan /. Tanggung jawab ada di si pemanggil komponen, bukan di komponen itu sendiri.
Moral of the story: kadang bug paling sederhana justru yang paling lama dicarinya. Dan ya — sepertinya aku memang harus lebih banyak baca dokumentasi. Wkwkwk.