Next.js Entegrasyonu: usePathname Hook Dokümantasyonu

usePathname hook'u, yerel ayar (locale) segmenti kaldırılmış olan geçerli Next.js yolunu (pathname) döndürür. Bu, yerel ayar ön ekini manuel olarak kaldırmak zorunda kalmadan, yerel ayar duyarlı gezinme oluşturmak (örneğin, hangi gezinme öğesinin aktif olduğunu belirlemek) için kullanışlıdır.

usePathname'i Next.js'te İçe Aktarma

import { usePathname } from "next-intlayer";

Genel Bakış

usePathname, next/navigation'dan gelen Next.js'in yerleşik usePathname() fonksiyonunu sarar, herhangi bir arama parametresini (search params) ekler ve yerel ayar önekini getPathWithoutLocale aracılığıyla kaldırır. Her istemci tarafı gezinmesinde (client-side navigation) yeniden render (re-render) tetikler. Hook yalnızca Client Component'lerde kullanılabilir ("use client" gerektirir).

Kullanım

"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;

Dönüş Değeri

Davranış

• Yerel ayar kırpma: Başlangıçtaki yerel ayar segmentini kaldırır (örneğin /tr/dashboard → /dashboard).
• Arama parametresi kırpma: Arama parametresi (search param) tabanlı yönlendirme modu kullanıldığında ?locale=... sorgu parametresini de kaldırır.
• Reaktif: Next.js App Router üzerinden yapılan her istemci tarafı gezinmede otomatik olarak güncellenir.
• SSR Güvenli: İlk render sırasında sunucu tarafı yolu döndürür, ardından istemcideki arama parametrelerini eşitler (sync).

useLocale ile Karşılaştırma

next-intlayer'dan alınan useLocale, dönüş değerinin bir parçası olarak zaten pathWithoutLocale'i sunar. Yerel ayar değiştirme işlevine ihtiyaç duymadan sadece yola (path) ihtiyacınız olduğunda usePathname'i kullanın.

// Hem yerel ayar durumuna hem de yola ihtiyacınız olduğunda:
import { useLocale } from "next-intlayer";
const { locale, pathWithoutLocale } = useLocale();

// Sadece yola ihtiyacınız olduğunda:
import { usePathname } from "next-intlayer";
const pathname = usePathname();

Örnek

"use client";

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

const links = [
  { href: "/dashboard", label: "Kontrol Paneli" },
  { href: "/settings", label: "Ayarlar" },
];

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;

İlgili Dokümanlar

• useLocale — mevcut yerel ayar + yerel ayar değiştirici (ayrıca pathWithoutLocale'i de sunar)
• getPathWithoutLocale — bu hook tarafından kullanılan temel yardımcı araç