fix(ts): Middleware type tweaks

errors/manifest.json

@@ -719,6 +719,10 @@
         {
           "title": "failed-to-fetch-devpagesmanifest",
           "path": "/errors/failed-to-fetch-devpagesmanifest.md"
+        },
+        {
+          "title": "middleware-parse-user-agent",
+          "path": "/errors/middleware-parse-user-agent.md"
         }
       ]
     }

errors/middleware-parse-user-agent.md

@@ -0,0 +1,34 @@
+# Removed parsed User Agent from Middleware API
+
+#### Why This Error Occurred
+
+Your application is interacting with `req.ua` which has been deprecated.
+
+```ts
+// middleware.ts
+import { NextRequest, NextResponse } from 'next/server'
+
+export function middleware(request: NextRequest) {
+  const viewport = request.ua.device.type === 'mobile' ? 'mobile' : 'desktop'
+
+  request.nextUrl.searchParams.set('viewport', viewport)
+  return NextResponse.rewrites(request.nextUrl)
+}
+```
+
+#### Possible Ways to Fix It
+
+The internal logic has been moved into a separate `userAgent` function that you can import from `next/server` and wrap your request instead.
+
+```ts
+// middleware.ts
+import { NextRequest, NextResponse, userAgent } from 'next/server'
+
+export function middleware(request: NextRequest) {
+  const { device } = userAgent(request)
+  const viewport = device.type === 'mobile' ? 'mobile' : 'desktop'
+
+  request.nextUrl.searchParams.set('viewport', viewport)
+  return NextResponse.rewrites(request.nextUrl)
+}
+```

errors/middleware-request-page.md

@@ -2,7 +2,7 @@
 
 #### Why This Error Occurred
 
-Your application is interacting with `request.page`, and it's being deprecated.
+Your application is interacting with `request.page` which has been deprecated.
 
 ```typescript
 // middleware.ts

packages/next/build/webpack/loaders/next-edge-ssr-loader/render.ts

@@ -2,7 +2,6 @@ import type { NextConfig } from '../../../../server/config-shared'
 import type { DocumentType, AppType } from '../../../../shared/lib/utils'
 import type { BuildManifest } from '../../../../server/get-page-files'
 import type { ReactLoadableManifest } from '../../../../server/load-components'
-import type { NextRequest } from '../../../../server/web/spec-extension/request'
 
 import WebServer from '../../../../server/web-server'
 import {
@@ -104,7 +103,7 @@ export function getRender({
   })
   const requestHandler = server.getRequestHandler()
 
-  return async function render(request: NextRequest) {
+  return async function render(request: Request) {
     const extendedReq = new WebNextRequest(request)
     const extendedRes = new WebNextResponse()
     requestHandler(extendedReq, extendedRes)

packages/next/server/web/error.ts

@@ -21,7 +21,7 @@ export class RemovedPageError extends Error {
 
 export class RemovedUAError extends Error {
   constructor() {
-    super(`The request.page has been removed in favour of \`userAgent\` function.
+    super(`The request.ua has been removed in favour of \`userAgent\` function.
   Read more: https://nextjs.org/docs/messages/middleware-parse-user-agent
   `)
   }

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

@@ -71,10 +71,20 @@ export class NextRequest extends Request {
     return this[INTERNALS].url
   }
 
+  /**
+   * @deprecated
+   * `page` has been deprecated in favour of `URLPattern`.
+   * Read more: https://nextjs.org/docs/messages/middleware-request-page
+   */
   public get page() {
     throw new RemovedPageError()
   }
 
+  /**
+   * @deprecated
+   * `ua` has been removed in favour of \`userAgent\` function.
+   * Read more: https://nextjs.org/docs/messages/middleware-parse-user-agent
+   */
   public get ua() {
     throw new RemovedUAError()
   }

packages/next/server/web/types.ts

@@ -52,7 +52,12 @@ export interface FetchEventResult {
   waitUntil: Promise<any>
 }
 
-export type NextMiddlewareResult = NextResponse | Response | null | undefined
+export type NextMiddlewareResult =
+  | NextResponse
+  | Response
+  | null
+  | undefined
+  | void
 
 export type NextMiddleware = (
   request: NextRequest,