'useRouter' only works in Client Components. Add the 'use client' directive.

`useRouter` är en klient-hook och kan inte användas i server-komponenter.

Förklaring

useRouter från next/navigation ger tillgång till router-objektet och metoder som push, replace, och refresh. Routern är ett klientkoncept — navigering sker i webbläsaren, inte på servern. Försöker du anropa useRouter i en server-komponent visas det här felet.

I server-komponenter har du i stället direkt tillgång till route-parametrar via params-proppen och search params via searchParams-proppen. Det behövs ingen hook eftersom data finns tillgänglig synkront.

Navigering som behöver ske programmatiskt, till exempel efter att ett formulär skickats, hör alltid hemma i en klientkomponent.

Vanliga orsaker

Saknad 'use client'-deklaration i en komponent som anropar useRouter. Vanligt vid migrering från Pages Router där useRouter användes brett.

Lösning

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

'use client';

import { useRouter } from 'next/navigation';

export default function BackButton() {
  const router = useRouter();
  return <button onClick={() => router.back()}>Tillbaka</button>;
}

För att läsa aktuell route i en server-komponent, använd i stället params och searchParams-propparna som Next.js skickar in automatiskt.