I'm working on a Next.js project with WordPress as a headless CMS.
It includes a blog of some sort and when rendering the page of a single blog post, the post's content is rendered by passing the rendered HTML from WordPress to a <div> using dangerouslySetInnerHTML. Everything else is rendered by Next.js.
The site also uses Next.js image optimization. However, that causes problems when rendering the post content. If the post content contains images, they are rendered as normal <img> tags (of course) but in order for them to be optimized, I need to render them as a custom React component (the Next.js <Image> component).
Any ideas on how that could be achieved?