Use Next.js <Link> component in posts with Markdown

For stakingcrypto.io I'm trying to store all content that is meant for blog, coin and exchange details in markdown components because I find it really easier to add and update data quickly.

A pain has always been to be able to insert <Image> and <Link> nextjs components as I always ending up with markdown files like this

As you can see, it does not look like markdown anymore and thus I can't ask not technical people to fill them up for me ☹️.

That's when I stumbled on this excellent post of Sebastien Castiel which fixed the <Image> problem in a very neat way. And I ended up with this:

A lot better 😀, and I thus realized it would be very easy to replace those ugly links (<Link>) in the same way with one easy trick!

         <article className="prose lg:prose-xl">
            {mdxContent && (
              <MDXRemote
                components={{
                  ...components,
                  a: ({ href, children }: any) => {
                    if (href.startsWith('/')) {
                      return (
                        <Link href={href}>
                          <a>{children}</a>
                        </Link>
                      );
                    }
                    return (
                      <a href={href} target="_blank" rel="noreferrer">
                        {children}
                      </a>
                    );
                  },
                }}
                {...mdxContent}
              />
            )}
          </article>

With this

• for an internal link, [Stake Ethereum](/stake/ETH/ethereum)
• for a _blank page, [Stake Ethereum](https://stakingcrypto.io/stake/ETH/ethereum)

So easy to write and a lot neater

I now can also then add some nice CSS tweaks to add a small icon next to those external links.

Splendid! 🤩

Thanks for reading and follow me on Twitter for more