Cannot find name 'URLPattern'

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

    Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 21.5.0: Tue Apr 26 21:08:22 PDT 2022; root:xnu-8020.121.3~4/RELEASE_X86_64
    Binaries:
      Node: 16.13.1
      npm: 8.9.0
      Yarn: 1.22.10
      pnpm: 4.14.4
    Relevant packages:
      next: 12.2.0
      eslint-config-next: 12.2.0
      react: 18.2.0
      react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

vercel

Describe the Bug

I am trying to upgrade to the GA Middlware. I previously had used logic such as

const { page }  = req
...
const isActualPage = !!page.name

to test against the URL in my middleware so i could be sure that I was only affecting urls that corresponded to my pages directory. Since this was removed in next 12.2 I had begun following the guide found here to upgrade my application to use URLPattern instead. I am, however, having trouble using that as VSCode and TS are telling that name doesn’t exist. I am having a hard time finding any information on URLPattern at all in other applications, so debugging as been tough.

If there’s something I need to add my global namespaces or otherwise, this just doesn’t seem to work with the default Next.js TS config.

Expected Behavior

new URLPattern() should be available in VSCode/TS globals

Link to reproduction

https://codesandbox.io/s/ecstatic-marco-s3lo6n?file=/middleware.ts

To Reproduce

1. Create a middleware.ts in your src or root folder
2. Try and use new URLPattern()

[szaveri]

Recently upgraded to NextJS 12.2.0 and as a workaround for anyone looking to upgrade (plan to change this once this issue is resolved)

import type { URLPattern } from 'types/urlpattern';

export const setPatterns = (pattern: string): Pattern => [
  [
    /* eslint-disable no-undef */
    // @ts-expect-error
    new URLPattern({ pathname: pattern }) as URLPattern,
    ({ pathname }) => pathname.groups,
  ],
];

with the type definition here https://github.com/kenchris/urlpattern-polyfill#api-reference

I created a custom Pattern interface as well to match the output expected in https://nextjs.org/docs/messages/middleware-upgrade-guide#after-3

interface PatternHandlerResult {
  [key: string]: string | undefined
}
export interface Pattern extends Array<[URLPattern, (pathname: URLPatternResult) => PatternHandlerResult]> {}

[jonahallibone]

@SukkaW It would be great if you guys could add the TypeDef!