Solved

renderOption Nextjs Link Component

  • 21 May 2023
  • 1 reply
  • 65 views

Badge

Hello!

 

We are building a Nextjs app and I’m wondering if there is an easy way to use the Nextjs Link component for anchor elements in a jsonRte field?

I looked at the jsonToHTML’s renderOption but does not seem to be supported in that way.

icon

Best answer by Tyler 2 June 2023, 21:17

View original

1 reply

Userlevel 3
Badge

I think you are kinda limited here. I would say either a custom component, or your component would have to parse the JSON that is coming out, look for an A tag and then swap that with a Next link. Similar-ish to:

if (domNode.name === 'a' && domNode.attribs && domNode.attribs.href) {
return (
<Link href={domNode.attribs.href}>
<a>{domNode.children[0].data}</a>
</Link>
);
}
  const html = jsonToHtml(content);
return Parser(html, { replace: replaceLinksWithNextLinks });

 

Reply