Sane Link component for Next.js that respects relative URLs

SaneLink.tsx

import InsaneLink from 'next/link';
import { useRouter } from 'next/router';
import React, { ReactNode, useEffect, useState } from 'react';

interface SaneLinkProps {
  href: string;
  prefetch? : boolean;
  children?: ReactNode;
  className?: string;
  scroll?: boolean;
  title?:string;
  onClick?: (e: any) => void;
}

const Link: React.FC<SaneLinkProps> = ({ href, prefetch = false, children, className, scroll, title, onClick }) => {
  const [saneHref, setSaneHref] = useState<string>(href);
  const router = useRouter();

  useEffect(() => {
    if (!href.startsWith('/')) {
      let url = new URL(href, 'https://fuck-next-js.com' + router.asPath);
      setSaneHref(url.pathname);
    }

  }, [href, router.asPath]);

  return <InsaneLink
    href={saneHref} prefetch={prefetch} className={className} scroll={scroll} title={title}
    onClick={onClick}
  >
    {children}
  </InsaneLink>
};

export default Link;