Förklaring

usePathname, useParams, och useSelectedLayoutSegment är hooks som läser navigeringstillståndet i klientens router. Server-komponenter renderas utanför klientens router-kontext och har inte tillgång till detta tillstånd via hooks.

För att läsa URL:en eller route-parametrar i en server-komponent används params- och searchParams-propparna som Next.js skickar in automatiskt.

Vanliga orsaker

En server-komponent anropar usePathname(), useParams(), eller useSelectedLayoutSegment() utan 'use client'-direktiv.

Lösning

Lägg till 'use client' i komponenten som behöver pathname:

'use client';

import { usePathname } from 'next/navigation';

export default function NavLink({ href, children }) {
  const pathname = usePathname();
  const isActive = pathname === href;
  return <a href={href} className={isActive ? 'active' : ''}>{children}</a>;
}

I server-komponenter läses route-parametrar direkt från props:

export default async function Page({ params }) {
  const { slug } = await params;
}