Next.js 13 webpack "URLPattern is not a constructor"

Question

inside app directory, page.tsx:

import { URLPattern } from "next/server";
const url = new URLPattern();

this is in a typescript file and typescript does not complain. When I hover over URLPattern:

(alias) class URLPattern
import URLPattern

Everything seems fine, but when I visit the page, I get this error on terminal:

error - TypeError: next_server__WEBPACK_IMPORTED_MODULE_5__.URLPattern is not a constructor
    at eval (webpack-internal:///(sc_server)/./app/page.tsx:30:14)
    at (sc_server)/./app/page.tsx (/home/Documents/projects/next.js/youtube-next13-static-blog/.next/server/app/page.js:678:1)
    at Function.__webpack_require__ (/home/Documents/projects/next.js/youtube-next13-static-blog/.next/server/webpack-runtime.js:33:42)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async collectGenerateParams (/home/Documents/projects/next.js/youtube-next13-static-blog/node_modules/next/dist/build/utils.js:713:17) {
  type: 'TypeError',
  page: '/'
}

Answer 1

I had to install urlpattern-polyfill

In the app directory

if (!globalThis.URLPattern) {
  await import("urlpattern-polyfill");
}

You do not need to import anything else