Add workaround for vercel/next.js#53347

src/components/DocsLink.tsx

@@ -1,4 +1,4 @@
-import Link from "next/link"
+import Link from "./LinkFix"
 import { AnchorHTMLAttributes } from "react"
 import { Index } from "./docs/Toc"
 

src/components/Footer.tsx

@@ -1,5 +1,5 @@
 import Container from "./Container"
-import Link from "next/link"
+import Link from "./LinkFix"
 import { Balancer } from "react-wrap-balancer"
 
 const now = new Date().getFullYear()

src/components/LinkFix.tsx

@@ -0,0 +1,46 @@
+import NextLink from "next/link"
+import { createElement, forwardRef } from "react"
+
+// This is a workaround for https://github.com/vercel/next.js/issues/53347
+// We render a normal <a> tag for external links and a <Link> for internal ones
+
+// TODO remove this once https://github.com/vercel/next.js/issues/53347 is fixed
+
+const Link: typeof NextLink = forwardRef((props, ref) => {
+  let href = props.href?.toString()
+  if (
+    href !== undefined &&
+    ((href.match(/https?:\/\//) &&
+      !href.startsWith("https://steep-wms.github.io/") &&
+      !href.startsWith("http://localhost")) ||
+      href.startsWith("mailto:"))
+  ) {
+    let forbiddenProps = [
+      "as",
+      "replace",
+      "scroll",
+      "shallow",
+      "passHref",
+      "prefetch",
+      "locale",
+      "legacyBehavior",
+      "onMouseEnter",
+      "onTouchStart",
+    ]
+
+    let keys = Object.keys(props)
+    for (let fp of forbiddenProps) {
+      if (keys.includes(fp)) {
+        throw new Error(
+          `Propery '${fp}' is not supported for external link '${href}'`,
+        )
+      }
+    }
+
+    return createElement("a", { ...props, "data-external": "external", ref })
+  }
+
+  return <NextLink {...props} ref={ref} />
+})
+
+export default Link

src/components/NavBar.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import Link from "next/link"
+import Link from "./LinkFix"
 import QuickSearch from "./search/QuickSearch"
 import { Spin as Hamburger } from "hamburger-react"
 import { useEffect, useRef, useState } from "react"

src/components/about/Profile.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { Balancer } from "react-wrap-balancer"
-import Link from "next/link"
+import Link from "@/components/LinkFix"
 import { Tooltip } from "@/components/Tooltip"
 import SimpleIcon from "@/components/SimpleIcon"
 import { siGithub } from "simple-icons"

src/components/docs/SidebarLeft.tsx

@@ -1,4 +1,4 @@
-import Link from "next/link"
+import Link from "@/components/LinkFix"
 import { Toc } from "@/components/docs/Toc"
 import Sidebar from "./Sidebar"
 import { useEffect, useRef } from "react"

src/components/docs/SidebarRight.tsx

@@ -1,4 +1,4 @@
-import Link from "next/link"
+import Link from "@/components/LinkFix"
 import Sidebar from "./Sidebar"
 import { Index, Section, Subsection } from "@/components/docs/Toc"
 import { ExternalLink } from "lucide-react"

src/components/get-started/DownloadButtons.tsx

@@ -2,7 +2,7 @@ import { Button } from "../Button"
 import { Download } from "lucide-react"
 import SimpleIcon from "../SimpleIcon"
 import { siDocker, siGithub } from "simple-icons"
-import Link from "next/link"
+import Link from "../LinkFix"
 import pkg from "../../package.json"
 
 const DownloadButtons = () => {

src/components/home/ExampleWorkflow.tsx

@@ -9,7 +9,7 @@ import { ChevronRight } from "lucide-react"
 import { useAnimate, stagger } from "framer-motion"
 import Container from "../Container"
 import useInViewEx from "../hooks/useInViewEx"
-import Link from "next/link"
+import Link from "../LinkFix"
 
 const ExampleWorkflow = () => {
   const [scope, animate] = useAnimate()

src/components/home/HeroWorkflow.tsx

@@ -14,7 +14,7 @@ import {
   useMotionValue,
   useReducedMotion,
 } from "framer-motion"
-import Link from "next/link"
+import Link from "../LinkFix"
 
 const HeroWorkflow = () => {
   const [scope, animate] = useAnimate()

src/components/search/SearchResultListItem.tsx

@@ -1,5 +1,5 @@
 import { ChevronLeft } from "lucide-react"
-import Link from "next/link"
+import Link from "../LinkFix"
 import clsx from "clsx"
 import type { SearchResult } from "./SearchResult"
 import { Index } from "../docs/Toc"

src/mdx-components.tsx

@@ -1,6 +1,6 @@
 // import Balancer from "react-wrap-balancer"
 import { createElement } from "react"
-import Link from "next/link"
+import Link from "./components/LinkFix"
 import CodeContainer, { CodeContainerProps } from "./components/CodeContainer"
 import DocsLink from "./components/DocsLink"