So gestalten Sie aktive Nav-Links in Serverkomponenten in Next.js

Hallo zusammen! Next.js ist derzeit sehr angesagt, insbesondere mit der neuen Version 15, die viele coole Funktionen hinzugefügt hat. Aber darum geht es heute nicht. Die bekanntesten Funktionen von Next.js sind der dateibasierte Router und das integrierte SSR (Server-Side Rendering).

SSR ist ein komplexes Thema, insbesondere wenn es um die Synchronisierung der Server- und Client-Zustände Ihrer App geht. Hier entscheiden sich viele Menschen stattdessen für Client-Side Rendering (CSR). Natürlich gibt es Szenarien, in denen Serverkomponenten nicht realisierbar sind, aber der entscheidende Punkt ist, dass Next.js im Wesentlichen auf SSR basiert, um Leistung und SEO zu verbessern, was es zu einer leistungsstarken Wahl für Anwendungen macht, die vom Rendering auf dem Server profitieren.

---

Soooo, wie erstellen wir eine Navigationsleiste mit Links, die hervorgehoben werden, wenn wir uns auf einer bestimmten Seite befinden? Der grundlegende Ansatz besteht darin, eine Reihe von Links zu durchlaufen und den Link hervorzuheben, dessen Pfadname mit dem aktuellen Pfad im Browser übereinstimmt. Um den Pfadnamen in Next.js zu erhalten, können Sie den Hook „Pathname“ (useRouter für Seitenrouter) verwenden. Mit diesem Ansatz erhalten wir am Ende etwas wie:

"use client";
import { cn } from "@/lib/utils";
import { usePathname } from "next/navigation";
import Link, { type LinkProps } from "next/link";

type ClientNavProps = {
  links: LinkProps[];
};

function ClientNav({ links }: ClientNavProps) {
  const pathname = usePathname();

  const isActive = (href: LinkProps["href"]) => {
    const hrefStr = href.toString();
    if (hrefStr === pathname) return true;
    if (hrefStr.length > 1 && pathname.startsWith(hrefStr)) return true;
    return false;
  };

  return (
    <nav className="space-x-2">
      {links.map((e) => (
        <Link
          {...e}
          key={e.href.toString()}
          className={cn(
            "px-2 py-1 border rounded-lg",
            isActive(e.href) && "bg-black text-white"
          )}
        />
      ))}
    </nav>
  );
}

export default ClientNav;

So wird es im Browser aussehen:

---

Das Problem bei diesem Ansatz besteht jedoch darin, dass die Komponente clientbasiert ist, was für SEO nicht ideal ist. Da wir in Serverkomponenten keine Client-Hooks aufrufen können, müssen wir uns mit der Frage befassen, wie wir den Pfadnamen auf der Serverseite erhalten, um den aktuellen Link als hervorgehoben darzustellen.

Und diese Frage ist nicht schwer zu beantworten, hier kommt Middleware zum Einsatz. Mithilfe von Middleware können wir den Pfadnamen zu den Antwortheadern hinzufügen und ihn so konfigurieren, dass er für alle Seitenrouten ausgelöst wird:

import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export const config = {
  matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],
};

export default function middleware(request: NextRequest) {
  const requestHeaders = new Headers(request.headers);
  requestHeaders.set("x-next-pathname", request.nextUrl.pathname);

  return NextResponse.next({ request: { headers: requestHeaders } });
}

Da wir nun x-next-pathname mit dem aktuellen Pfadnamen haben, können wir mit der Header-Funktion darauf zugreifen (beachten Sie, dass Next 15 und höher jetzt über asynchrone Header, Cookies, Parameter und Suchparameter verfügen).

import { cn } from "@/lib/utils";
import { headers } from "next/headers";
import Link, { type LinkProps } from "next/link";

type ClientNavProps = {
  links: LinkProps[];
};

async function ServerNav({ links }: ClientNavProps) {
  const headersList = await headers();
  const pathname = headersList.get("x-next-pathname") || "/";

  const isActive = (href: LinkProps["href"]) => {
    const hrefStr = href.toString();
    if (hrefStr === pathname) return true;
    if (hrefStr.length > 1 && pathname.startsWith(hrefStr)) return true;
    return false;
  };

  return (
    <nav className="space-x-2">
      {links.map((e) => (
        <Link
          {...e}
          key={e.href.toString()}
          className={cn(
            "px-2 py-1 border rounded-lg",
            isActive(e.href) && "bg-black text-white"
          )}
        />
      ))}
    </nav>
  );
}

export default ServerNav;

Seien Sie vorsichtig bei der Platzierung der Server-Navigationsleiste in Ihrer App. Dieses spezielle Beispiel funktioniert nur, wenn es in page.tsx-Dateien verwendet wird, da es bei URL-Änderungen neu gerendert werden muss.

---

Dies ist wahrscheinlich die einfachste Möglichkeit, eine serverseitige Navigationsleistenkomponente zu erstellen, die den aktuell aktiven Link hervorhebt. Das war’s – danke fürs Lesen und bis zum nächsten Mal!

Das obige ist der detaillierte Inhalt vonSo gestalten Sie aktive Nav-Links in Serverkomponenten in Next.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!