Integrasi Next.js: Dokumentasi Hook usePathname

Hook usePathname mengembalikan pathname Next.js saat ini dengan segmen lokal (locale) yang telah dihapus. Ini berguna untuk membangun navigasi yang menyadari lokal (misalnya, menentukan item navigasi mana yang aktif) tanpa harus secara manual menghapus awalan (prefix) lokal.

Mengimpor usePathname di Next.js

import { usePathname } from "next-intlayer";

Ringkasan

usePathname membungkus usePathname() bawaan Next.js dari next/navigation, menambahkan parameter pencarian (search params), dan menghapus awalan lokal melalui getPathWithoutLocale. Ia memicu proses render ulang pada setiap navigasi sisi klien (client-side). Hook ini hanya tersedia di Client Components (memerlukan "use client").

Penggunaan

"use client";

import type { FC } from "react";
import { usePathname } from "next-intlayer";

type NavItemProps = {
  href: string;
  label: string;
};

const NavItem: FC<NavItemProps> = ({ href, label }) => {
  const pathname = usePathname();
  const isActive = pathname === href;

  return (
    <a href={href} aria-current={isActive ? "page" : undefined}>
      {label}
    </a>
  );
};

export default NavItem;

Nilai Kembalian (Return Value)

Perilaku

• Penghapusan lokal: Menghapus segmen lokal di awal (contoh: /id/dashboard → /dashboard).
• Penghapusan parameter pencarian: Juga menghapus parameter kueri ?locale=... saat menggunakan mode routing berbasis parameter pencarian.
• Reaktif: Secara otomatis memperbarui nilai pada setiap navigasi sisi klien melalui Next.js App Router.
• Aman untuk SSR: Mengembalikan pathname sisi server selama proses render pertama, kemudian menyinkronkan parameter pencarian pada klien.

Perbandingan dengan useLocale

useLocale dari next-intlayer sudah mengekspos pathWithoutLocale sebagai bagian dari nilai kembaliannya. Gunakan usePathname ketika Anda hanya membutuhkan pathname dan tidak membutuhkan fungsionalitas pergantian bahasa (locale-switching).

// Ketika Anda membutuhkan status lokal dan pathname:
import { useLocale } from "next-intlayer";
const { locale, pathWithoutLocale } = useLocale();

// Ketika Anda hanya membutuhkan pathname:
import { usePathname } from "next-intlayer";
const pathname = usePathname();

Contoh

"use client";

import type { FC } from "react";
import { usePathname } from "next-intlayer";

const links = [
  { href: "/dashboard", label: "Dasbor" },
  { href: "/settings", label: "Pengaturan" },
];

const Sidebar: FC = () => {
  const pathname = usePathname();

  return (
    <nav>
      {links.map(({ href, label }) => (
        <a
          key={href}
          href={href}
          style={{ fontWeight: pathname === href ? "bold" : "normal" }}
        >
          {label}
        </a>
      ))}
    </nav>
  );
};

export default Sidebar;

Terkait