Hi, everyone! Next.js is really hot right now, especially with the new
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!
SOCIAL SHARE CARD GENERATOR