Cara Membaca Pathname Next Js di Server dan Client Component

Ditulis oleh Next.js

Untuk membaca pathname Next.js di App Router, gunakan usePathname() dari next/navigation di dalam Client Component. Fungsi ini mengembalikan string seperti /dashboard/profil tanpa query string. Server Component tidak bisa memakai hook ini, jadi baca lewat header request atau kirim pathname sebagai props dari komponen client.

Jawab Cepat: API Pathname di App Router

Next.js memisahkan API navigasi berdasarkan tempat kode berjalan. Pilih API yang sesuai agar tidak memicu error build.

  • Client Component: pakai usePathname() untuk pathname aktif dan reaktif saat navigasi client-side.
  • Server Component: tidak ada akses langsung ke pathname. Alternatif terbatas memakai headers() untuk membaca header seperti host dan url.
  • Bedakan tiga data route: pathname adalah path URL, params dinamis berasal dari folder [slug], search params berasal dari ?q=....

Cara Membaca Pathname di Client Component

Kesalahan paling sering terjadi di baris pertama: lupa menulis use client padahal memakai usePathname.

  1. Buat file komponen client dan tulis use client di baris paling atas.
  2. Impor usePathname dari next/navigation.
  3. Panggil hook di dalam body komponen, lalu pakai nilainya untuk logika tampilan.
"use client";
import { usePathname } from "next/navigation";

export default function Menu() {
  const pathname = usePathname();
  const aktif = pathname === "/produk";
  return (
    <nav>
      <a href="/produk" style={{ fontWeight: aktif ? "bold" : "normal" }}>
        Produk
      </a>
    </nav>
  );
}
  • File wajib diawali use client karena usePathname adalah hook client-only.
  • Hook hanya berjalan di komponen turunan App Router, bukan di pages/ lama.
  • Nilai berubah otomatis saat pengguna pindah halaman tanpa reload penuh.

BACA JUGA:

Opsi Pathname di Server Component

Server Component dirender sebelum browser mengirim event navigasi, sehingga Next.js tidak menyediakan hook pathname di server. Ada dua pola yang praktis dipakai.

  • Kirim pathname dari Client Component kecil ke Server Component melalui props atau komposisi children.
  • Baca headers() di Server Component atau Middleware bila kebutuhanmu hanya segment awal atau deteksi host.
  • Untuk proteksi route dan redirect awal, Middleware lebih tepat daripada membaca pathname manual di setiap halaman.
Lokasi Cara baca Catatan
Client Component usePathname() Reaktif dan paling akurat
Server Component headers() atau props Tidak reaktif saat navigasi client
Middleware request.nextUrl.pathname Cocok untuk redirect dan auth

Kesalahan Umum Saat Baca Pathname

  • Memanggil usePathname di Server Component sehingga build gagal karena hook client dipakai di server.
  • Tertukar antara pathname /produk, search params ?kategori=buku, dan route params /produk/[id].
  • Menyimpan pathname ke state lalu membandingkannya dengan data fetch yang terlambat, sehingga menu aktif sempat kedip.

FAQ

Apakah usePathname bisa dipakai di Server Component?

Tidak bisa. Hook tersebut khusus Client Component dan file-nya wajib memakai use client.

Apa beda pathname dan search params?

Pathname adalah jalur URL seperti /blog, sedangkan search params adalah bagian setelah tanda tanya seperti ?page=2.

Bagaimana tandai link aktif dari pathname?

Bandingkan hasil usePathname() dengan href tujuan, lalu ubah class atau style bila nilainya sama.

Artikel Terkait