Förklaring

HTML-specifikationen förbjuder nästlade ankarlänkar. Webbläsaren hanterar det på oförutsägbara sätt och React visar en varning i konsolen.

I Next.js uppstår det vanligast när <Link> används som wrapper runt ett kort som självt innehåller <Link>-element, eller när en komponent som renderar <a> importeras inuti en annan <Link>. Sedan Next.js 13 renderar <Link> direkt en <a> utan att kräva ett barn-ankar, vilket gör problemet lätt att missa.

Vanliga orsaker

<Link> nästlad inuti en annan <Link>. En klickbar kortkomponent som omsluter hela sin yta med <Link> och sedan innehåller ytterligare länkelement inuti.

Lösning

Omstrukturera så att ankarlänkar inte nästlas. En vanlig lösning för klickbara kort är att använda en enda länk för titeln:

// Fel — Link inuti Link
<Link href="/artikel">
  <div>
    <Link href="/kategori">Kategori</Link>
    <h2>Titel</h2>
  </div>
</Link>

// Rätt — separata länkar utan nästling
<div className={styles.card}>
  <span className={styles.category}>Kategori</span>
  <h2>
    <Link href="/artikel">Titel</Link>
  </h2>
</div>

Om hela kortets yta behöver vara klickbar, lägg till en onClick-handler med useRouter på kortcontainern i stället för nästlade <Link>.