Next.js Integration: usePathname Hook Dokumentation

Der usePathname Hook gibt den aktuellen Next.js-Pfad ohne das Gebietsschema-Segment zurück. Dies ist nützlich für den Aufbau einer lokalisierungsbasierten Navigation – zum Beispiel, um festzustellen, welches Navigationselement aktiv ist – ohne das Gebietsschema-Präfix manuell entfernen zu müssen.

Importieren von usePathname in Next.js

import { usePathname } from "next-intlayer";

Übersicht

usePathname verpackt die integrierte Funktion usePathname() von Next.js aus next/navigation, fügt alle Suchparameter (search params) hinzu und entfernt das Gebietsschema-Präfix mittels getPathWithoutLocale. Es führt bei jeder clientseitigen Navigation ein erneutes Rendern durch. Der Hook ist nur in Client Components verfügbar (erfordert "use client").

Verwendung

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

Rückgabewert

Verhalten

• Gebietsschema-Entfernung: Entfernt das führende Gebietsschema-Segment (z.B. /de/dashboard → /dashboard).
• Entfernung der Suchparameter: Entfernt auch einen ?locale=... Abfrageparameter, wenn der auf Suchparametern basierende Routing-Modus verwendet wird.
• Reaktiv: Aktualisiert sich automatisch bei jeder clientseitigen Navigation über den Next.js App Router.
• SSR-sicher: Gibt den serverseitigen Pfad während des ersten Renderings zurück und synchronisiert dann die Suchparameter auf dem Client.

Vergleich mit useLocale

useLocale aus next-intlayer legt pathWithoutLocale bereits als Teil seines Rückgabewerts offen. Verwenden Sie usePathname, wenn Sie nur den Pfad benötigen und keine Funktionalität zum Wechseln des Gebietsschemas erforderlich ist.

// Wenn Sie sowohl den Gebietsschema-Status als auch den Pfad benötigen:
import { useLocale } from "next-intlayer";
const { locale, pathWithoutLocale } = useLocale();

// Wenn Sie nur den Pfad benötigen:
import { usePathname } from "next-intlayer";
const pathname = usePathname();

Beispiel

"use client";

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

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

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;

Verwandt

• useLocale — aktuelles Gebietsschema + Gebietsschema-Umschalter (legt auch pathWithoutLocale offen)
• getPathWithoutLocale — das grundlegende Dienstprogramm, das von diesem Hook verwendet wird