fix: app-router prefetch crash when an invalid URL is passed to Link

packages/next/src/client/components/app-router.tsx

@@ -369,7 +369,17 @@ function Router({
         ) {
           return
         }
-        const url = new URL(addBasePath(href), window.location.href)
+
+        let url: URL
+        try {
+          url = new URL(addBasePath(href), window.location.href)
+        } catch (err) {
+          console.error(
+            `Cannot prefetch '${href}' because it cannot be converted to a URL.`
+          )
+          return
+        }
+
         // External urls can't be prefetched in the same way.
         if (isExternalURL(url)) {
           return

test/e2e/app-dir/app-prefetch/app/invalid-url/delay.js

@@ -0,0 +1,15 @@
+'use client'
+
+import { useEffect } from 'react'
+import { useState } from 'react'
+
+export function Delay({ duration = 500, children }) {
+  const [isVisible, setIsVisible] = useState(false)
+  useEffect(() => {
+    const timeout = setTimeout(() => setIsVisible(true), duration)
+    return () => clearTimeout(timeout)
+  }, [duration])
+
+  if (!isVisible) return null
+  return <>{children}</>
+}

test/e2e/app-dir/app-prefetch/app/invalid-url/from-link/page.js

@@ -0,0 +1,16 @@
+import Link from 'next/link'
+import { INVALID_URL } from '../invalid-url'
+import { Delay } from '../delay'
+
+export const dynamic = 'force-dynamic'
+
+export default async function Page() {
+  return (
+    <>
+      <Link href={INVALID_URL}>invalid link</Link>
+      <Delay>
+        <h1>Hello, world!</h1>
+      </Delay>
+    </>
+  )
+}

test/e2e/app-dir/app-prefetch/app/invalid-url/from-router-prefetch/page.js

@@ -0,0 +1,20 @@
+'use client'
+import { useEffect } from 'react'
+import { INVALID_URL } from '../invalid-url'
+import { Delay } from '../delay'
+import { useRouter } from 'next/navigation'
+
+export const dynamic = 'force-dynamic'
+
+export default async function Page() {
+  const router = useRouter()
+  useEffect(() => {
+    router.prefetch(INVALID_URL)
+  }, [router])
+
+  return (
+    <Delay>
+      <h1>Hello, world!</h1>
+    </Delay>
+  )
+}

test/e2e/app-dir/app-prefetch/app/invalid-url/invalid-url.js

@@ -0,0 +1,8 @@
+// We need a URL that reliably fails `new URL(url, window.location)
+// This only fails if `window.location` starts with `https://`:
+//
+//   const invalidUrl = 'http:'
+//
+// because `new URL('http:', 'http://localhost:3000')` works fine.
+// So better to pick something that's always invalid
+export const INVALID_URL = '///'

test/e2e/app-dir/app-prefetch/prefetching.test.ts

@@ -329,4 +329,20 @@ describe('app dir - prefetching', () => {
       })
     })
   })
+
+  describe('should not crash for invalid URLs', () => {
+    it.each([
+      { title: 'passed to Link', path: '/invalid-url/from-link' },
+      {
+        title: 'passed to router.prefetch',
+        path: '/invalid-url/from-router-prefetch',
+      },
+    ])('$title', async ({ path }) => {
+      const browser = await next.browser(path)
+
+      await check(() => browser.hasElementByCssSelector('h1'), true)
+
+      expect(await browser.elementByCss('h1').text()).toEqual('Hello, world!')
+    })
+  })
 })