Comment styliser les liens de navigation actifs dans les composants du serveur dans Next.js

Salut à tous ! Next.js est vraiment à la mode en ce moment, surtout avec la nouvelle version 15, qui a ajouté de nombreuses fonctionnalités intéressantes. Mais aujourd’hui, il ne s’agit pas de ça. Les fonctionnalités les plus connues de Next.js sont son routeur basé sur des fichiers et son SSR (Server-Side Rendering) intégré.

SSR est un sujet complexe, en particulier lorsqu'il s'agit de synchroniser les états du serveur et du client de votre application. De nombreuses personnes optent plutôt pour le rendu côté client (CSR). Bien sûr, il existe des scénarios dans lesquels les composants du serveur ne sont pas réalisables, mais le point clé est que Next.js est fondamentalement construit autour de SSR pour améliorer les performances et le référencement, ce qui en fait un choix puissant pour les applications bénéficiant du rendu sur le serveur.

Alors, comment pouvons-nous créer une barre de navigation avec des liens qui sont mis en évidence lorsque nous sommes sur une certaine page ? L'approche de base consiste à parcourir un tableau de liens et à mettre en évidence celui dont le nom de chemin correspond au chemin actuel dans le navigateur. Pour obtenir le nom de chemin dans Next.js, nous pouvons utiliser le crochet Pathname (useRouter for pages router). Avec cette approche, nous obtiendrons quelque chose comme :

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

Voici à quoi cela ressemblera dans le navigateur :

Cependant, le problème avec cette approche est que le composant est basé sur le client, ce qui n'est pas idéal pour le référencement. Étant donné que nous ne pouvons pas appeler de hooks client dans les composants serveur, nous devons résoudre la question de savoir comment obtenir le chemin d'accès côté serveur pour afficher le lien actuel comme indiqué.

Et il n’est pas difficile de répondre à cette question, ici le middleware est utile. À l'aide d'un middleware, nous pouvons ajouter le chemin d'accès aux en-têtes de réponse et le configurer pour qu'il se déclenche pour toutes les routes de page :

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 } });
}

Ayant désormais x-next-pathname avec le chemin d'accès actuel, nous pouvons y accéder en utilisant la fonction headers (n'oubliez pas que Next 15 et supérieur ont désormais des en-têtes asynchrones, des cookies, des paramètres et des searchParams).

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;

Soyez prudent quant à l'endroit où vous placez la barre de navigation du serveur dans votre application. Cet exemple particulier ne fonctionnera que lorsqu'il est utilisé dans des fichiers page.tsx, car il doit être restitué lors des modifications d'URL.

C'est probablement le moyen le plus simple de créer un composant de barre de navigation côté serveur qui met en évidence le lien actif actuel. Voilà, merci d'avoir lu et à la prochaine fois !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!