rsnext/errors/middleware-parse-user-agent.md
Serkan Bektaş 0c0318e75b
Wrong function name (#46546)
The function name was written incorrectly. Property 'rewrites' does not exist on type NextResponse.



## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] [e2e](https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs) tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm build && pnpm lint`
- [x] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
2023-02-28 11:46:50 +00:00

1,007 B

Removed parsed User Agent from Middleware API

Why This Error Occurred

Your application is interacting with req.ua which has been deprecated.

// 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.

// 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.rewrite(request.nextUrl)
}