How to style active Nav links in server components in Next.js

Hi, everyone! Next.js is really hot right now, especially with the new version 15, which added lots of cool features. But today isn’t about that. The most well-known features of Next.js are its file-based router and built-in SSR (Server-Side Rendering).

SSR is a complex topic, especially when it comes to synchronizing the server and client states of your app, here is many people opt for Client-Side Rendering (CSR) instead. Of course, there are scenarios where server components aren’t feasible, but the key point is that Next.js is fundamentally built around SSR to enhance performance and SEO, making it a powerful choice for applications that benefit from rendering on the server.

Soooo, how do we build a navbar with links that are highlighted when we're on a certain page? The basic approach is to iterate over an array of links and highlight the one whose pathname matches the current path in the browser. To get pathname in Next.js we can you usePathname (useRouter for pages router) hook. With this approach, we’ll end up with something like:

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

Here is how it will looks in browser:

However, the problem with this approach is that the component is client-based, which isn’t ideal for SEO. Since we can’t call client hooks in server components, we need to address the question of how to get the pathname on the server side to render the current link as highlighted.

And this question isn’t difficult to answer, here middleware comes in handy. Using middleware, we can add the pathname to the response headers, and configure it so that it triggered for all page routes:

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

Now having x-next-pathname with current pathname we can access it using headers function (mind that Next 15 and above now have asynchronous: headers, cookies, params, and 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;

Be cautious about where you place the server navbar in your app. This particular example will only work when used inside page.tsx files, as it needs to be re-rendered on URL changes.

This is likely the simplest way to build a server-side navbar component that highlights the current active link. That’s it—thanks for reading, and see you next time!

The above is the detailed content of How to style active Nav links in server components in Next.js. For more information, please follow other related articles on the PHP Chinese website!