Use React Components for Native HTML Tags with MDX and Next.js
The markdown rendering includes a lot of native HTML tags as well of course. Assume for instance we want to change the behavior of links within our rendered document. We can definitely create a custom component and include that in our MDX document, but we’d rather not want to have to use a specific <Link> component and rather be able to keep the native way of rendering links in Markdown, that is [some link](https://juri.dev).
Turns out that with next-mdx-remote we are able to automatically replace all rendered <a> tags (or really any other tag we want) with a React Component.
Prefer to read along as well? Here's the accompanying article.
Instructor: [0:00] MDX is really powerful for making your content interactive, such as like embedding here our YouTube video, and in general, also for writing the articles, because embedding a YouTube video is handy, rather than copy-and-pasting entire iframe HTML pieces into our Markdown document.
[0:15] There's another interesting feature. Assume that we have some links, so my website, which then goes to https://yuri.dev. These are plain links. If we go back to our rendering, this would be rendered out by our Markdown renderer as an HRF.
[0:33] We might not want to also create here a custom link component, all our links needs to be written in a certain manner. Rather, we want to stick to how Markdown defines the links. Also, because most of the tooling would support this way of writing them.
[0:47] The next-mdx-remote allows you to actually override the existing tags as well, with custom components. Let's create a new component into our MDX Elements library. Again, I'm choosing here our React component. Let's call this CustomLink, and the project, mdx-elements.
[1:06] If I go again back to our library down there, we see that new CustomLink being included here. Let me embed here an entire piece of code. Here you can see now, we create a new component that is called CustomLink, which uses here the NextLink component, and wraps basically now HRF around it.
[1:25] Let's maybe also add here some class, so that we can easily distinguish our link later in our Markdown document. Let's add here some background. We also need to make sure this is exported again from our main library here. Finally, if we go back to our page component, we would want to import it here as well.
[1:44] Once you have it in here, we need to include it in this mdx-elements object, which gets parsed to the mdx-remote. What we can do here now, is we can say, whenever there is an tag within our document, use our CustomLink instead.
[1:59] If we go now to our website and refresh, we go to the very bottom, we see our link, which clicking it works. It doesn't have the background set yet, probably due to a conflict with the CSS overrides. We can clearly see that our class has been applied, which means that our custom component is rendered here, rather than the standard HRF link.
I added 'slug' if there is any dynamic content and used inline conditionals. The 'children' prop was added to explicitly show that it is rendering the link's text Finally the '...otherprops' can be used for other properties we might want to use for the link.
export interface CustomLinkProps { href: string; slug: string | undefined; children?: React.ReactNode; }
export function CustomLink({href, slug, children, ...otherProps}: CustomLinkProps) {
return (
<Link className='bg-yellow-100' href={${href}${slug? '/'+ encodeURIComponent(slug): ''}} {...otherProps}>
{children || 'Example Text'}
</Link>
);
}
Link component on new NextJS doesn't accept anchor tags inside anymore, the fastest way to fix for me was adding the "legacyBehavior" prop