NextRequest.nextUrl is an empty object {} when deployed on Vercel

[williamli]

Verify canary release

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

Provide environment information

Operating System:
Platform: darwin
Arch: x64
Version: Darwin Kernel Version 21.4.0: Mon Feb 21 20:35:58 PST 2022; root:xnu-8020.101.4~2/RELEASE_ARM64_T6000
Binaries:
Node: 14.19.1
npm: 6.14.16
Yarn: 1.22.18
pnpm: 6.11.0
Relevant packages:
next: 12.1.0
react: 17.0.2
react-dom: 17.0.2

warn - Latest canary version not detected, detected: "12.1.0", newest: "12.1.1-canary.16".
Please try the latest canary version (npm install next@canary) to confirm the issue still exists before creating a new issue.
Read more - https://nextjs.org/docs/messages/opening-an-issue

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

According to docs, NextRequest.nextUrl should contain

nextUrl - Includes an extended, parsed, URL object that gives you access to Next.js specific properties such as pathname, basePath, trailingSlash and i18n

but the following prints {} in console.log

// pages/_middleware.ts

import type { NextFetchEvent, NextRequest } from 'next/server'

export function middleware(req: NextRequest, ev: NextFetchEvent) {
  console.log(req.nextUrl)
  return new Response('Hello, world!')
}

Tested on next@latest and [email protected].

Expected Behavior

// pages/_middleware.ts

import type { NextFetchEvent, NextRequest } from 'next/server'

export function middleware(req: NextRequest, ev: NextFetchEvent) {
  console.log(req.nextUrl)
  return new Response('Hello, world!')
}

seems to be working when yarn dev:

NextURL {
  [Symbol(NextURLInternal)]: {
    url: URL {
      href: 'http://localhost:3001/robots.txt?1647936635339',
      origin: 'http://localhost:3001',
      protocol: 'http:',
      username: '',
      password: '',
      host: 'localhost:3001',
      hostname: 'localhost',
      port: '3001',
      pathname: '/robots.txt',
      search: '?1647936635339',
      searchParams: URLSearchParams { '1647936635339' => '' },
      hash: ''
    },
    options: {
      basePath: '',
      headers: [Object],
      i18n: null,
      trailingSlash: false
    },
    basePath: ''
  }
}

To Reproduce

Create new Next.js project, add the following _middleware and deploy on Vercel:

// pages/_middleware.ts

import type { NextFetchEvent, NextRequest } from 'next/server'

export function middleware(req: NextRequest, ev: NextFetchEvent) {
  console.log(req.nextUrl)
  return new Response('Hello, world!')
}

Related Issues:

1. Docs: i18n doc needs to be updated for to use with url absolute & nextUrl clone #35273 (comment)

[Kikobeats]

It looks like req.nextUrl is not being serialized correctly.

A temporal workaround could be to just do req.nextUrl.toString() instead.

[Kikobeats]

Hum, rather than an issue related with serialization, I think it's just nextURL properties are not enumerable.

Still no clear with this is just happening under production scenario

[williamli]

For now, return NextResponse.rewrite(newReq) has to rewritten as return NextResponse.rewrite(newReq.toString()) so that it works both in localhost and on Vercel.

export function middleware(req: NextRequest) {
  
  const newReq = req.nextUrl.clone()
  newReq.pathname = '/new'

  

  const pathname = req.nextUrl.pathname.toString()
  if (pathname !== '/new' && pathname !== '/')
    return NextResponse.rewrite(newReq.toString())
}

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.