custom <Link /> wrapper around next/link

components/Link/Link.module.css

@@ -0,0 +1,14 @@
+.link {
+  color: var(--link);
+  background-image: linear-gradient(var(--link-underline), var(--link-underline));
+  background-position: 0% 100%;
+  background-repeat: no-repeat;
+  background-size: 0% var(--link-underline-size);
+  padding-bottom: var(--link-underline-size);
+  /* background-size is for hover animation, color & border are for theme fading: */
+  transition: background-size 0.25s ease-in-out, color 0.25s ease, border 0.25s ease;
+}
+
+.link:hover {
+  background-size: 100% var(--link-underline-size);
+}

components/Link/Link.tsx

@@ -0,0 +1,49 @@
+import NextLink from "next/link";
+import classNames from "classnames";
+import isAbsoluteUrl from "is-absolute-url";
+import type { AnchorHTMLAttributes, PropsWithChildren } from "react";
+import type { LinkProps } from "next/link";
+
+import styles from "./Link.module.css";
+
+export type Props = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href"> &
+  LinkProps &
+  PropsWithChildren<{
+    target?: string;
+    rel?: string;
+    forceNewWindow?: boolean;
+    className?: string;
+  }>;
+
+const CustomLink = ({
+  href,
+  prefetch = false,
+  passHref = true,
+  target,
+  rel,
+  forceNewWindow,
+  className,
+  ...rest
+}: Props) => {
+  // this component auto-detects whether or not we should use a normal HTML anchor externally or next/link internally,
+  // can be overridden with `forceNewWindow={true}`.
+  if (forceNewWindow || isAbsoluteUrl(href.toString())) {
+    return (
+      <a
+        href={href.toString()}
+        target={target || "_blank"}
+        rel={rel || "noopener noreferrer"}
+        className={classNames(styles.link, className)}
+        {...rest}
+      />
+    );
+  } else {
+    return (
+      <NextLink href={href} prefetch={prefetch} passHref={passHref}>
+        <a className={classNames(styles.link, className)} {...rest} />
+      </NextLink>
+    );
+  }
+};
+
+export default CustomLink;