So I implemented Next.js client-side navigation support for non first-party generated HTML

[SukkaW]

Next.js client-side navigation requires <Link /> component from next/link. However, there are many cases that your content is out of your control:

• Your HTML comes from a CMS backend
• Your content is created from a WYSIWYG editor
• Your render markdown files locally (blog-starter example)

So I implement a solution based on Gatsby's gatsby-plugin-catch-links:

import { useEffect, useRef } from 'react';
import { useRouter } from 'next/router';

// First, here is a a very dirty implementation of checking internal link, based on gatsby-plugin-catch-links
const shouldCatchLinks = (
  event: MouseEvent,
  targetsList: HTMLAnchorElement[]
): boolean => {
  if (
    // user is forcing a navigation
    event.button !== 0
    || event.altKey
    || event.ctrlKey
    || event.metaKey
    || event.shiftKey
    // navigation is handled elsewhere
    || event.defaultPrevented
  ) return false;

  const anchor = event.target;

  if (!(anchor instanceof HTMLAnchorElement)) return false;

  // check if the link is in the list of targets
  if (!targetsList.includes(anchor)) return false;

  // a[download] should be handled by the browser
  if (anchor.hasAttribute('download') === true) return false;
  // don't handle anchors without href
  if (anchor.hasAttribute('href') === false) return false;

  if ((
    anchor.hasAttribute('target') === false
    || anchor.target == null
    || ['_self', ''].includes(anchor.target)
    || (anchor.target === '_parent'
      && (!anchor.ownerDocument.defaultView.parent // Assumption: This can be falsey
        || anchor.ownerDocument.defaultView.parent
        === anchor.ownerDocument.defaultView))
    || (anchor.target === '_top'
      && (!anchor.ownerDocument.defaultView.top // Assumption: This can be falsey
        || anchor.ownerDocument.defaultView.top
        === anchor.ownerDocument.defaultView))
  ) === false) return false;

  if (anchor.protocol !== window.location.protocol) return false;

  if (anchor.host !== window.location.host) return false;
  // IE clears the host value if the anchor href changed after creation, but I just don't want to handle it.
  // Also, IE has the default port included in the anchor host but also excluded from
  // the location host. For example: http://example.com would have a location.host of 'example.com' and a destination.host of
  // 'example.com:80'. But once again, I don't want to handle this.
  //
  // If you really want to be compatible with IE, you should dynamically create another HTMLAnchorElement for comparison:
  // const a = document.createElement('a');
  // a.href = window.location.href;
  // if (anchor.host !== a.host) return false;

  if (
    anchor.hash !== ''
    && (
      // Do not catch the in-page hash
      anchor.pathname === window.location.pathname
      // On IE, dynamic created anchors has their pathname as an empty string.
      || anchor.pathname === ''
    )
  ) return false;

  return true;
};

const prefetched = new Set<string>();

// Let's say this is your content component.
export const Content = (props: { content: string }) => {
  const postContainerRef = useRef<HTMLElement>(null);
  const router = useRouter();

  useEffect(() => {
    if (postContainerRef.current) {
      const aEls = [...postContainerRef.current.querySelectorAll('a')];

      const handleClick = (e: MouseEvent) => {
        if (shouldCatchLinks(e, aEls)) {
          e.preventDefault();
          router.push((e.target as HTMLAnchorElement).getAttribute('href'));
        }
      };
      // prefetch on hover, just like <Link prefetch={false} />
      const handleMouseEnter = (e: MouseEvent) => {
        if (shouldCatchLinks(e, aEls)) {
          e.preventDefault();
          const href = (e.target as HTMLAnchorElement).getAttribute('href');
          if (!prefetched.has(href)) {
            prefetched.add(href);
            router.prefetch(href);
          }
        }
      };

      aEls.forEach(a => {
        const href = a.getAttribute('href');
        if (href?.startsWith('/')) {
          a.addEventListener('click', handleClick);
          a.addEventListener('mouseenter', handleMouseEnter);
        }
      });

      return () => {
        aEls.forEach(a => {
          a.removeEventListener('click', handleClick);
          a.removeEventListener('mouseenter', handleMouseEnter);
        });
      };
    }
  }, [router]);
};