feat: add polyfill of URL.canParse for browser compatibility

packages/next/src/client/components/react-dev-overlay/internal/helpers/get-socket-url.ts

@@ -1,4 +1,3 @@
-import { canParseUrl } from '../../../../../lib/url'
 import { normalizedAssetPrefix } from '../../../../../shared/lib/normalized-asset-prefix'
 
 function getSocketProtocol(assetPrefix: string): string {
@@ -16,7 +15,7 @@ export function getSocketUrl(assetPrefix: string | undefined): string {
   const prefix = normalizedAssetPrefix(assetPrefix)
   const protocol = getSocketProtocol(assetPrefix || '')
 
-  if (canParseUrl(prefix)) {
+  if (URL.canParse(prefix)) {
     // since normalized asset prefix is ensured to be a URL format,
     // we can safely replace the protocol
     return prefix.replace(/^http/, 'ws')

packages/next/src/lib/url.ts

@@ -21,14 +21,17 @@ export function stripNextRscUnionQuery(relativeUrl: string): string {
   return urlInstance.pathname + urlInstance.search
 }
 
-export function canParseUrl(url: string): boolean {
-  if (typeof URL.canParse === 'function') {
-    return URL.canParse(url)
+// patch URL.canParse to be available in older browsers e.g. Safari 16
+// x-ref: https://github.com/vercel/next.js/pull/70215
+// x-ref: https://caniuse.com/?search=URL.canParse
+// Since URL.canParse is available in Node.js v18.17.0 and later,
+// we only need to patch it for the browser.
+if (typeof window !== 'undefined' && !('canParse' in URL)) {
+  ;(URL as any).canParse = (url: string, base?: string): boolean => {
+    try {
+      return !!new URL(url, base)
+    } catch {
+      return false
+    }
   }
-  try {
-    new URL(url)
-    return true
-  } catch {}
-
-  return false
 }

packages/next/src/server/lib/router-server.ts

@@ -47,7 +47,6 @@ import {
 } from '../dev/hot-reloader-types'
 import { normalizedAssetPrefix } from '../../shared/lib/normalized-asset-prefix'
 import { NEXT_PATCH_SYMBOL } from './patch-fetch'
-import { canParseUrl } from '../../lib/url'
 
 const debug = setupDebug('next:router-server:main')
 const isNextFont = (pathname: string | null) =>
@@ -677,7 +676,7 @@ export async function initialize(opts: {
         if (assetPrefix) {
           hmrPrefix = normalizedAssetPrefix(assetPrefix)
 
-          if (canParseUrl(hmrPrefix)) {
+          if (URL.canParse(hmrPrefix)) {
             // remove trailing slash from pathname
             // return empty string if pathname is '/'
             // to avoid conflicts with '/_next' below

packages/next/src/shared/lib/normalized-asset-prefix.ts

@@ -1,5 +1,3 @@
-import { canParseUrl } from '../../lib/url'
-
 export function normalizedAssetPrefix(assetPrefix: string | undefined): string {
   // remove all leading slashes and trailing slashes
   const escapedAssetPrefix = assetPrefix?.replace(/^\/+|\/+$/g, '') || false
@@ -10,7 +8,7 @@ export function normalizedAssetPrefix(assetPrefix: string | undefined): string {
     return ''
   }
 
-  if (canParseUrl(escapedAssetPrefix)) {
+  if (URL.canParse(escapedAssetPrefix)) {
     const url = new URL(escapedAssetPrefix).toString()
     return url.endsWith('/') ? url.slice(0, -1) : url
   }