a next.js link that can be disabled.

LLink.tsx

// npm i clsx react-aria
import clsx from 'clsx';
import Link, { LinkProps } from 'next/link';
import React, { AnchorHTMLAttributes, useRef } from 'react';
import { type AriaLinkOptions, useLink } from 'react-aria';

export default function LLink(
  props: AnchorHTMLAttributes<HTMLAnchorElement> & {
    children: React.ReactNode;
    next?: LinkProps;
    aria?: AriaLinkOptions;
  }
) {
  const { children, next, aria, ...attrs } = props;
  const ref = useRef<HTMLAnchorElement | null>(null);
  const { linkProps } = useLink(aria ?? {}, ref);
  const className = clsx(props.className, 'transition', {
    'opacity-50 cursor-default': props.aria?.isDisabled,
  });

  if (next) {
    return (
      <Link {...attrs} {...linkProps} {...next} className={className}>
        {children}
      </Link>
    );
  }

  return (
    <a {...attrs} {...linkProps} className={className}>
      {children}
    </a>
  );
}