Improving Next.js links | Zach Schnackel

Next 13 changes how links are constructed; by not requiring the inner <a /> anymore 🎉

Next.js ships with a <Link /> component, available via the next/link module. Both client-side transitions and preloading routes make this a must-have for fast user experiences.

index.tsx

import Link from 'next/link'
 
export default function Home() {
  return (
    <Link href="/contact">
      <a>Contact page</a>
    </Link>
  )
}

One aspect that's always looked a bit odd to me is how the DOM is constructed. Ideally, I'd prefer something more familiar with the ability to choose between both internal and external links.

Similar to a previous article on MDX link routing in Gatsby, it turns-out we can use a very similar approach in Next.js:

TextLink.tsx

import * as React from 'react'
 
import Link from 'next/link'
 
// Checks against absolute URLs that share 👇 so we can still pass it along to our internal link component
const domainRegex = /http[s]*:\/\/[www.]*YOURDOMAIN\.com[/]?/
 
export interface TextLinkProps extends React.HTMLAttributes<HTMLAnchorElement> {
  href: string
}
 
const TextLink = React.forwardRef<HTMLAnchorElement, TextLinkProps>(
  ({ href, children, ...rest }, forwardRef) => {
    const sameDomain = domainRegex.test(href)
 
    // If our link matches the `domainRegex` above, update to become relative
    if (sameDomain) {
      // eslint-disable-next-line no-param-reassign
      href = href.replace(domainRegex, '/')
    }
 
    // If our link is relative, we can assume it's an internal link and use `next/link`
    if (href.startsWith('/')) {
      return (
        <Link href={href}>
          <a ref={forwardRef} data-link-internal {...rest}>
            {children}
          </a>
        </Link>
      )
    }
 
    // Treat urls that aren't http protocols as "normal" links
    if (!href.startsWith('http')) {
      return (
        <a href={href} ref={forwardRef} {...rest}>
          {children}
        </a>
      )
    }
 
    // Otherwise, this is an external link that we can add on good security defaults for
    return (
      <a
        ref={forwardRef}
        data-link-external
        href={href}
        rel="nofollow"
        {...rest}
      >
        {children}
      </a>
    )
  }
)
 
export default React.memo(TextLink)

The above <TextLink /> component accomplishes the simplicity I was after by doing the following:

Updates any absolute links that match our domainRegex and makes them relative
Returns next/link as the link component for any relative links
Returns a normal href for non-http protocols
Attaches rel="nofollow" for external links that match none of the above

Best of all, I can write my links as I normally would, with all props passed-through to their appropriate areas:

<!-- Input -->
<TextLink href="https://zslabs.com">Homepage</TextLink>
<!-- Output -->
<Link href="/"><a>Homepage</a></Link>
 
<!-- Input -->
<TextLink href="/contact" className="text-slate-900">Contact</TextLink>
<!-- Output -->
<Link href="/contact"><a className="text-slate-900">Contact</a></Link>
 
<!-- Input -->
<TextLink href="https://nextjs.org">Next.js</TextLink>
<!-- Output -->
<a href="http://nextjs.org" rel="nofollow">Next.js</a>

I also use this as part of the components I pass-through to next-mdx-remote to transform Markdown links automatically.

:: Published Jan 5, 2021 ::