Incorrect response status code when using NextResponse.rewrite(url, { status }) in middleware

[stefee]

Verify canary release

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

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.5.0: Mon Apr 24 20:52:24 PDT 2023; root:xnu-8796.121.2~5/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.12.1
      npm: 8.19.2
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.4.4-canary.0
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 4.9.5

Which area(s) of Next.js are affected? (leave empty if unsure)

Middleware / Edge (API routes, runtime)

Link to the code that reproduces this issue or a replay of the bug

stefee/next-res-status-repro@48b14d8

To Reproduce

Run

npm run dev

Open the application

Describe the Bug

Response status code is 200

Expected Behavior

Response status code should be 403

Which browser are you using? (if relevant)

N/A

How are you deploying your application? (if relevant)

next dev, standalone (Docker)

[kijikunnn]

I apologize if my understanding is incorrect.

The following code is part of NextResponse. From what I see in the code, rewrite does not seem to return a status. It appears that if a page exists, it would return a 200 status, and if it does not, it would return a 404 status.
If a response with a specific status code is necessary, shouldn't we be using redirect instead?

next.js/packages/next/src/server/web/spec-extension/response.ts

Lines 79 to 106 in 62af200

	static redirect(url: string | NextURL | URL, init?: number | ResponseInit) {
	const status = typeof init === 'number' ? init : init?.status ?? 307
	if (!REDIRECTS.has(status)) {
	throw new RangeError(
	'Failed to execute "redirect" on "response": Invalid status code'
	)
	}
	const initObj = typeof init === 'object' ? init : {}
	const headers = new Headers(initObj?.headers)
	headers.set('Location', validateURL(url))
	return new NextResponse(null, {
	...initObj,
	headers,
	status,
	})
	}
	static rewrite(
	destination: string | NextURL | URL,
	init?: MiddlewareResponseInit
	) {
	const headers = new Headers(init?.headers)
	headers.set('x-middleware-rewrite', validateURL(destination))
	handleMiddlewareField(init, headers)
	return new NextResponse(null, { ...init, headers })
	}

[stefee]

@kijikunnn Thanks for your response 🙏🏻 If a user is not authorized to access a page but we do not want to redirect to a different route, how do you suggest we achieve that?

The advantage of rewrite instead of redirect is that we can display the "Not Authorized" page and respond with a 403 status whilst maintaining the same URL. This way the user can hit "Refresh" in the browser once they have been granted access. A common example of this is Google Docs if you have not been granted permissions to view a document yet, but once you have been granted then you can hit refresh to view the document.

[stefee]

P.S. the main advantage of using the 403 status code instead of 200 is that we can monitor the number of 4xx status code responses in our CDN to detect suspicious activity. The CDN can also handle caching of the page differently for example.

[jknight12882]

Agree with this. Showing different content while retaining the url is fairly common. Taking the site down for maintenance for example. You don't want to navigate users (or more importantly, crawlers) away from the url. You want to give them a 503 and a graceful landing page

[aslakhellesoy]

I agree this should be supported. NextResponse.rewrite currently allows a 2nd argument of type MiddlewareResponseInit, which has a status property. Why does it even allow this 2nd argument if anything you put in it is ignored?

[astateful]

This should definitely be supported. I tried it myself just now and can confirm it is not working. We are SEO driven company and therefore need to, among other things, return 410 code on some pages to provide bots with a more graceful error message, as well as 451 code (unavailable for legal reasons). So being able to change status code is also critical in a business sense.

[isaac-martin]

yes really needing to pass a 451 to a rewrite or redirect here for unavailalbe regions. Even the redirect won't accept a 451 status code and fails with invalid code message

[webgears-cd]

@isaac-martin What I actually realised is that it is still possible to return custom error codes, however it is not possible to display a NextJS rendered page in this case, only static content. For example:

if (some_condition) {
  return new NextResponse(
    JSON.stringify({ message: 'service not available' }),
    {
      status: 451,
      headers: { 'content-type': 'application/json' }
    }
  );
}```

But for business reasons we more than likely do not want to return such a page to a client. So basically, to clarify matters, we need to be able to redirect or rewrite with a custom error code to a NextJS rendered page.

[gerkim62]

did this get fixed yet?

[tuanpq1998]

I tried it on version 15.1.4 with react 18 and seem like it works:
return NextResponse.rewrite( new URL("/about", request.url ), { status: 451, } );

[stefee]

@tuanpq1998 I have found that this works correctly when using the App Router but not when using Pages Router. We recently migrated an app to use App Router and were able to start using rewrite in our middleware to handle Bad Request.