CODEWITHSUNDEEP
javascriptreactjsnext.js
Mike Willis
Mike Willis

Reputation: 1522

NextJS Link isn't rendering an anchor tag

I'm using React + NextJS, and I'm trying to render a list of products, much like you'd see on a typical ecommerce category page. Each product is in a p, and that p should link to the appropriate detail page (so it should be surrounded by an anchor a tag).

Unfortunately, the links work but they don't render actual anchor tags. Can anyone explain what I'm missing?

Scenario A: a normal text link (works as expected)

input:

<Link href="wherever">word holmes</Link>

output:

<a href="wherever">word holmes</a>

Scenario B: linking a block of whatever

input:

<Link href="wherever">
    <p>word holmes</p>
</Link>

output:

<p>word holmes</p>

desired output:

<a href="wherever"><p>word holmes</p></a>

Scenario C: adding my own a to the block of whatever

input:

<Link href="wherever">
    <a>
        <p>word holmes</p>
    </a>
</Link>

output:

<a href="wherever"><p>word holmes</p></a>

Upvotes: 3

Views: 6098

Answers (1)

Bafsky
Bafsky

Reputation: 781

According to https://github.com/vercel/next.js/blob/canary/packages/next/client/link.tsx the a tag is added automatically if the child is a string. Otherwise it just returns the child. So in your case the child is a p tag, so that's all that is returned. Seems like you could just wrap that in an a tag and that should work.

Upvotes: 9

Related Questions