DEV Community


Discussion on: How to Make a Markdown Blog With Next.js

joserfelix profile image
Jose Felix Author

Hi Esnare, thanks for reading my post! I'm glad you like it.

Yes, it is possible to switch the <a/> with <Link/>. However, there is a caveat: using <Link/> for links outside your Next.js page will error out. My recommendation would be to create a <Link/> for the contact page, and an <a/> for everything else.

So, to get started we have to modify React Markdown default <a/>. For that, we have the renderers prop:

         link: LinkNode,

After that, let's create the LinkNode component:

const LinkNode = (props) => {
  // Here is the magic
 // Change to any conditional to match your contact form.
  if (props.href === "/contact-us") {
    return (
      <Link href={props.href} passHref>

  return <a href={props.href}>{props.children}</a>;

That's it! I hope this helped.

esnaremaussa profile image
Esnare Maussa

Thanks for your reply Jose,

That's good stuff, I shall test it now :)

While researching on that issue, I noticed this library called MDX Basically, it lets you use react components directly on the markdown files. Here is the integration it with with Next.js:, I am going to test this one too :)

Thanks for all mate!

Thread Thread
joserfelix profile image
Jose Felix Author


I have read about MDX and it is really good for creating interactive blog posts. I didn't use it in this tutorial because it is not compatible with most git-based CMS. Some CMS like netlify-cms do support it with a plugin, but for me, it still isn't mature enough.

In the future, I will experiment with it more and see if there is an efficient solution.