refactor(middleware): deprecate request.page

errors/middleware-request-page.md

@@ -0,0 +1,41 @@
+# Deprecated page into Middleware API
+
+#### Why This Error Occurred
+
+Your application is interacting with `request.page`, and it's being deprecated.
+
+```typescript
+// /item/[id]/_middleware.js
+import { NextResponse } from 'next/server'
+
+export function middleware(event) {
+  const { params } = event.request.page
+  if (params.id) {
+    const item = await db.get(params.id)
+    return new NextResponse.json(item)
+  }
+}
+```
+
+#### Possible Ways to Fix It
+
+You can use [URLPattern](https://developer.mozilla.org/en-US/docs/Web/API/URLPattern) instead:
+
+```typescript
+// /item/[id]/_middleware.js
+import { NextResponse } from 'next/server'
+
+const params = (url) => {
+  const result = new URLPattern({ pathname: '/item/:id' }).exec(request.url)
+  return result ? result.pathname.groups : {}
+}
+
+export function middleware(request) {
+  const { id } = params(request.url)
+
+  if (id) {
+    const item = await db.get(params.id)
+    return new NextResponse.json(item)
+  }
+}
+```

packages/next/server/web/adapter.ts

@@ -1,6 +1,6 @@
 import type { NextMiddleware, RequestData, FetchEventResult } from './types'
 import type { RequestInit } from './spec-extension/request'
-import { DeprecationError } from './error'
+import { DeprecationSignatureError } from './error'
 import { fromNodeHeaders } from './utils'
 import { NextFetchEvent } from './spec-extension/fetch-event'
 import { NextRequest } from './spec-extension/request'
@@ -23,7 +23,6 @@ export async function adapter(params: {
       ip: params.request.ip,
       method: params.request.method,
       nextConfig: params.request.nextConfig,
-      page: params.request.page,
     },
   })
 
@@ -97,14 +96,14 @@ class NextRequestHint extends NextRequest {
   }
 
   get request() {
-    throw new DeprecationError({ page: this.sourcePage })
+    throw new DeprecationSignatureError({ page: this.sourcePage })
   }
 
   respondWith() {
-    throw new DeprecationError({ page: this.sourcePage })
+    throw new DeprecationSignatureError({ page: this.sourcePage })
   }
 
   waitUntil() {
-    throw new DeprecationError({ page: this.sourcePage })
+    throw new DeprecationSignatureError({ page: this.sourcePage })
   }
 }

packages/next/server/web/error.ts

@@ -1,4 +1,4 @@
-export class DeprecationError extends Error {
+export class DeprecationSignatureError extends Error {
   constructor({ page }: { page: string }) {
     super(`The middleware "${page}" accepts an async API directly with the form:
   
@@ -10,3 +10,11 @@ export class DeprecationError extends Error {
   `)
   }
 }
+
+export class DeprecationPageError extends Error {
+  constructor() {
+    super(`The request.page has been deprecated in favour of URLPattern.
+  Read more: https://nextjs.org/docs/messages/middleware-request-page
+  `)
+  }
+}

packages/next/server/web/spec-extension/fetch-event.ts

@@ -1,4 +1,4 @@
-import { DeprecationError } from '../error'
+import { DeprecationSignatureError } from '../error'
 import { NextRequest } from './request'
 
 const responseSymbol = Symbol('response')
@@ -42,7 +42,7 @@ export class NextFetchEvent extends FetchEvent {
    * Read more: https://nextjs.org/docs/messages/middleware-new-signature
    */
   get request() {
-    throw new DeprecationError({
+    throw new DeprecationSignatureError({
       page: this.sourcePage,
     })
   }
@@ -53,7 +53,7 @@ export class NextFetchEvent extends FetchEvent {
    * Read more: https://nextjs.org/docs/messages/middleware-new-signature
    */
   respondWith() {
-    throw new DeprecationError({
+    throw new DeprecationSignatureError({
       page: this.sourcePage,
     })
   }

packages/next/server/web/spec-extension/request.ts

@@ -4,6 +4,7 @@ import { NextURL } from '../next-url'
 import { isBot } from '../../utils'
 import { toNodeHeaders, validateURL } from '../utils'
 import parseua from 'next/dist/compiled/ua-parser-js'
+import { DeprecationPageError } from '../error'
 
 import { NextCookies } from './cookies'
 
@@ -14,7 +15,6 @@ export class NextRequest extends Request {
     cookies: NextCookies
     geo: RequestData['geo']
     ip?: string
-    page?: { name?: string; params?: { [key: string]: string | string[] } }
     ua?: UserAgent | null
     url: NextURL
   }
@@ -27,7 +27,6 @@ export class NextRequest extends Request {
       cookies: new NextCookies(this),
       geo: init.geo || {},
       ip: init.ip,
-      page: init.page,
       url: new NextURL(url, {
         headers: toNodeHeaders(this.headers),
         nextConfig: init.nextConfig,
@@ -56,10 +55,7 @@ export class NextRequest extends Request {
   }
 
   public get page() {
-    return {
-      name: this[INTERNALS].page?.name,
-      params: this[INTERNALS].page?.params,
-    }
+    throw new DeprecationPageError()
   }
 
   public get ua() {
@@ -98,10 +94,6 @@ export interface RequestInit extends globalThis.RequestInit {
     i18n?: I18NConfig | null
     trailingSlash?: boolean
   }
-  page?: {
-    name?: string
-    params?: { [key: string]: string | string[] }
-  }
 }
 
 interface UserAgent {