NextResponse redirect with Header Prop

[SamKomesarook]

How would one issue a redirect within middleware, while also setting custom headers?

[devjiwonchoi]

This is one of a way to do it.

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
 
export function middleware(request: NextRequest) {
  if (request.nextUrl.pathname === '/') {
    const response = NextResponse.redirect(new URL('/test', request.nextUrl))
    response.headers.set('some-header', 'hello')

    return response
  }
}

Reference

• Next Response
• Setting Headers

[SamKomesarook]

Legend, thank you!

[IronBlossom]

on the redirected '/test' route, i am trying to access the data with headers() from 'next/headers'.
But the 'some-header' is missing from the headers. In my case both '/' and '/test' is server component. Any insights ? I am on 14.2.3

[vicky-hemnani]

@devjiwonchoi We are also encountering the same issue where we cannot access the headers we have set on redirect. We used the same approach mentioned above to set and retrieve the headers.

[LikeDreamwalker]

It seems like this solution is not able to be used for the near versions; for me, it is not working on 14.2.4

[lukeocodes]

Yes this work-around no longer works

[sahil-1012]

Is anyone else experiencing this issue? It's causing significant problems.

I've been investigating and have formed some theories about what might be happening:
Next.js seems to be setting headers, but a redirection is occurring before these headers are fully set. This leads to a situation where the headers exist but aren't accessible on the page you're redirected to. When the middleware runs for the first time on this new page, it can't find the headers because the redirection happened first.

Here's an example to help explain:
Imagine you're trying to log out. You go to /logout, which should redirect you to /login. You also want to set a header like login: 'false'. What appears to be happening is:

• Next.js starts the redirection to /login.
• It tries to set the header, but it's too late - you're already being sent to the new page.
• When you land on /login, the header isn't there yet.
• However, if you refresh the /login page, the header will now be present.

This is just my understanding based on what I've observed. If anyone has experienced something similar or has more insights, please share.

[LikeDreamwalker]

What I have tried is using a pure login component and keeping the login status on the client, which can prevent the route issue, but it needs to design the app in another way.

[ZowWeb]

or just simply

return NextResponse.redirect(new URL('/slug', request.nextUrl), 302).headers.set('foo', 'bar')

[droid001]

@ZowWeb Did you get this to work on your side or are you guessing? Chaining a header doesn't work on 15.1.4.

[ZowWeb]

worked for me with next^14 didn't try for version 15+

[amanzrx4]

This no longer works in nextjs 15. All i wanna do is to show a toast when the unauthenticated user is redirected from auth routes to the root, i wanna send a header along with it so i can show a toast.

[ZowWeb]

don't think headers would be apt in this case, rather send a query param in response and use that to inform user

/[root-url]?message=You%20must%20be%20authenticated!

[AussieWebDev]

EDIT: spoke too soon, not working as expected

on 15.5 this worked for me:

return NextResponse.redirect(new URL(destination, request.url), {
headers: newHeaders,
})