Can't get headers if using middleware

[rizkiandrianto]

Description

When I'm using NextResponse to append headers, Next can catch the headers.
But not when I use createMiddleware from next-intl/middleware;

Am I missing something?

Mandatory reproduction URL (CodeSandbox or GitHub repository)

https://codesandbox.io/p/sandbox/github/amannn/next-intl/tree/main/examples/example-next-13?file=%2Fsrc%2Fmiddleware.tsx%3A1%2C1

Reproduction description

Steps to reproduce:

1. Open reproduction
2. See default page it will throw default title

Expected behaviour

Should be based on thrown headers based on middleware.tsx

[amannn]

It seems like you're linking to the unmodified App Router example, I don't see any broken behavior there. I'm also not sure what your inquiry is, are you looking to add an additional response header (see the middleware docs)?

I'll convert this to a discussion since this looks like a usage question, I hope you understand.

[rizkiandrianto]

@amannn Thanks for pointing to the right discussion (not sure before if this a bug or not).
Sorry didn't check copied link.

Here is the right one: https://codesandbox.io/p/sandbox/quirky-merkle-l7pjx6?file=%2Fsrc%2Fmiddleware.tsx

And as you can see, I can't get the added headers if using middleware although I've already add the header.

[amannn]

You can't call NextResponse.next() again, that's what the next-intl middleware does internally. Response headers can be added as illustrated in the docs.

If you need to read an additional request header in one of your components, you need to set them before you're calling the next-intl middleware.

Here's a fixed version of your example: https://codesandbox.io/p/sandbox/determined-bird-4n5577?file=%2Fsrc%2Fapp%2F%5Blocale%5D%2Fpage.tsx%3A6%2C47

/cc @barbarah since you've commented below.

[barbarah]

Thank you! Playing around with your codesandbox example. I see that response.headers.set('x-custom-header', 'custom'); will not do anything (step 3 in the middleware). But request.headers.set('x-custom-header', 'custom'); will set a custom header.

[amannn]

response.headers.set('x-custom-header', 'custom'); will not do anything

Well, it sets a response header:

(can't be read from an RSC, naturally)

[barbarah]

Yes, sorry, you are right. I was using headers().get('x-custom-header') from 'next/headers'. But does are, of course, request headers. Weird that my code used to work. Thank you again; your example did help me. :)

Sorry @rizkiandrianto, for hijacking your discussion.

[rizkiandrianto]

Thanks @amannn for the answer, that helps a lot.
Also thanks @barbarah for make me realize that headers is a request headers.

[barbarah]

I have a similar issue. I have a custom header set in the middleware. This header was working in 2.13.0-beta.2. I just updated it to 3.0.0-beta.6 and now my custom header is gone.

[amannn]

I think we've solved this in the thread above.

@barbarah I just stumbled over https://app.colonialcollections.nl, that's the app you're working on—right? My knowledge on the subject is really limited (to be more honest, based on an episode of Last Week Tonight), but looks like a really cool project! I'll keep an eye on the app, keep up the good work! 🙌

[barbarah]

Yes, this is solved.

That is the app! John Oliver explains the subject very well :). It's still very much WIP. Now the app is only in Dutch and English but eventually will be translated into a lot more languages.