Parsing links in markdown and use next/link

[gabriel-ortiz]

Hi there, first off, I love Next.js. This is a pleasure to code in.

So i have a question about links that come through from our CMS. Our WYSIWYG produces markdown, and if the markdown contains a link, how do we parse the link and wrap in the next/link component? Or, is this even a big deal?

So what i've tried so far is to parse the markdown with react-markdown and this plugin contains a function that can parse the URI transformLinkUribut unfortunately, this callback function only gives the URL and not the title and link text, etc. But alas, this has not worked at all.....

Here's the example of markdown

content:
      '[Nulla kevin salami](/posts/mistakes-tourists-make-on-their-first-trip-abroad) dolor dolore ball tip lorem ut buffalo meatloaf ribeye. Consequat jowl est do. Pork meatball shankle.

Render component

            <ReactMarkdown
                escapeHtml={false}
                source={content}
                transformLinkUri={(uri) => {
                    console.log(uri);
                    return <Link href="posts/[slug]" as={`${uri}`}></Link>;
                }}
            />

Does anyone has suggestions?

[laugharn]

You can define a renderers object as a ReactMarkdown prop, which should give you a little more control over the link:

<ReactMarkdown
  renderers={{
    link: ({ children, href }) => {
      return <Link href={href}><a>{children}</a></Link>
    }
  }}
/>

Edited to fix the example code

[gabriel-ortiz]

FANTASTIC!!! Thank you so much @laugharn. Thank you for providing this solution... I am so grateful!
I got stuck for a minute but realized i had to wrap children in an a tag:

            <ReactMarkdown
                source={content}
                escapeHtml={false}
                renderers={{
                    link: ({ children, href }) => {
                        return (
                            <Link href={href}>
                                <a>{children}</a>
                            </Link>
                        );
                    },
                }}
            />

[laugharn]

Glad I could help and sorry I mangled the example.

[sodhisaab]

Thank you for answering. I was looking for the same question. But I have some styling issues.

I don't know, even if it's possible to add some tailwindcss classes to the Link and P tag, etc.

<ReactMarkdown
  source={post.content}
  escapeHtml={false}
  renderers={{
    p: ({ children }) => (
      <p className="text-primary text-2xl">{children}</p>
    ),
    link: ({ children, href }) => (
      <Link href={href}>
        <a className="text-primary text-2xl">{children}</a>
      </Link>
    ),
  }}
/>

Your help would be really appreciated 🙏🏼

[sodhisaab]

Seems like I am missing something. Because when I click on the link. It navigates to another page but reloads the whole page.

So I think the next/link does not work here, any idea?

I created my project from this example.
https://github.com/vercel/next.js/tree/5d7f7a47afa554e5b04c15aebb7ee1f9d3628cfd/examples/blog-starter

[sodhisaab]

Actually, it was my mistake. I was parsing markdown to HTML and then try to use <ReactMarkdown />. So it was not working. I just remove the mdToHtml parser function and now it works. :)

[hermesjose94]

buenas en mi caso no me veo que next/link salga y uso este codigo

[qrider]

Can this be done with a slug of HTML as well? I have an external CMS system where the markup is HTML. I am looking to use both the Nextjs link tag for hrefs and image tag (for img).

[deniapps]

Looks like. It cannot.
I tried a helper function:

import Link from "next/link";
import ReactDOMServer from "react-dom/server";

const generateLink = (url, name, target = "_self") => {
  return ReactDOMServer.renderToString(
    <Link href={url}>
      <a>{name}</a>
    </Link>
  );
};

But it works as HTML string. Hope this is a solution.

[lansolo99]

I've come through the same problem, and since ReactMarkdown has no renderers prop anymore, I had to replace it using components. I also set small workaround to get dynamic target attribute value and fix typescript error on props using assertion.
Here is the code I used:

<ReactMarkdown
              rehypePlugins={[rehypeRaw]}
              components={{
                a: ({ node, ...props }) => {
                  console.log("props: ", { props });
                  return (
                    <Link href={props.href as string}>
                      <a
                        target={
                          props.href?.includes("http") ? "_blank" : "_self"
                        }
                      >
                        {props.children[0]}
                      </a>
                    </Link>
                  );
                },
              }}
            >
              {page.text}
            </ReactMarkdown>

[0x74h51N]

With Next.js 14, I utilized the following approach due to the limitations of using the HTML tag element within the Link component and TypeScript type issues. This allows me to navigate to the desired link within the site without triggering a full re-render.

...
import Link from "next/link";

const CustomLink = ({
  children,
  ...props
}: React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
...
  return (
    <Link
      href={props.href as string}
      className="text-log-col underline underline-offset-3 cursor-none"
    >
      {children}
    </Link>
  );
};

export default CustomLink;

Usage:

 <ReactMarkdown
                  components={{ a: CustomLink }}
                  remarkPlugins={[breaks]}
                  rehypePlugins={[rehypeRaw]}
                >
                  {t(item.description)}
</ReactMarkdown>