Next.js इंटीग्रेशन: usePathname हुक दस्तावेज़

usePathname हुक वर्तमान Next.js पथ (pathname) को बिना लोकेल (locale) सेगमेंट के लौटाता है। यह लोकेल-जागरूक नेविगेशन बनाने के लिए उपयोगी है — उदाहरण के लिए, यह निर्धारित करना कि कौन सा नेविगेशन आइटम सक्रिय है — बिना मैन्युअल रूप से लोकेल उपसर्ग को हटाए।

Next.js में usePathname को आयात करना

import { usePathname } from "next-intlayer";

अवलोकन

usePathname, next/navigation से Next.js के अंतर्निहित usePathname() को रैप करता है, किसी भी खोज पैरामीटर (search params) को जोड़ता है, और getPathWithoutLocale के माध्यम से लोकेल उपसर्ग को हटा देता है। यह हर क्लाइंट-साइड नेविगेशन पर फिर से रेंडर (re-render) को ट्रिगर करता है। यह हुक केवल Client Components में उपलब्ध है ("use client" की आवश्यकता है)।

उपयोग

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

रिटर्न वैल्यू

व्यवहार

• लोकेल स्ट्रिपिंग: शुरुआती लोकेल सेगमेंट को हटा देता है (उदा: /hi/dashboard → /dashboard)।
• सर्च पैरामीटर स्ट्रिपिंग: जब सर्च पैरामीटर-आधारित रूटिंग मोड का उपयोग किया जाता है, तो यह ?locale=... क्वेरी पैरामीटर को भी हटा देता है।
• रिएक्टिव: Next.js App Router के माध्यम से प्रत्येक क्लाइंट-साइड नेविगेशन पर स्वचालित रूप से अपडेट होता है।
• SSR सुरक्षित: पहले रेंडर के दौरान सर्वर-साइड पथ लौटाता है, फिर क्लाइंट पर सर्च पैरामीटर्स को सिंक करता है।

useLocale के साथ तुलना

next-intlayer से useLocale पहले से ही अपने रिटर्न वैल्यू के हिस्से के रूप में pathWithoutLocale को प्रदर्शित करता है। जब आपको केवल पथ (path) की आवश्यकता हो और लोकेल-स्विचिंग कार्यक्षमता की आवश्यकता न हो, तो usePathname का उपयोग करें।

// जब आपको लोकेल स्थिति और पथ दोनों की आवश्यकता हो:
import { useLocale } from "next-intlayer";
const { locale, pathWithoutLocale } = useLocale();

// जब आपको केवल पथ की आवश्यकता हो:
import { usePathname } from "next-intlayer";
const pathname = usePathname();

उदाहरण

"use client";

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

const links = [
  { href: "/dashboard", label: "डैशबोर्ड" },
  { href: "/settings", label: "सेटिंग्स" },
];

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;

संबंधित दस्तावेज़

• useLocale — वर्तमान लोकेल + लोकेल स्विचर (यह pathWithoutLocale भी प्रदर्शित करता है)
• getPathWithoutLocale — इस हुक द्वारा उपयोग की जाने वाली अंतर्निहित उपयोगिता