Inserting Next.js Links into an html string

Question

I have an html string that I retrieve from an API.

const htmlString = "<p>Hello World</p>";

I'm using react's dangerouslySetInnerHTML to display that content on my page.

Now before displaying it, I'd like to process it and put a link on " World ". But not an <a> Tag. I need an actual Next.js <Link> tag. So a string replace probably won't do the job.

The result I want to achieve in jsx is:

const processed = <p>Hello <Link href="/my-route"><a>World</a></Link></p>

I've thought of using React.createElement but I'm not sure how to interpolate the content inside the string.

Any ideas how I could achieve this?

Answer 1

 Hello<Link href="https://github.com">World</Link>

You dont need to specify another anchor tag inside a link. This should work fine.