Next [14.2.3] Custom headers not working when using redirect in middleware about next.js

[icyJoseph]

Is the issue here that, redirect actually answers back to the client. The browser then follows the redirect Location header, but, it doesn't include any other headers it receives from the server, when doing so. This is likely what's happening here.

To get pathnames in Server Components, if you can build them within the entry page.tsx, you can use the cache trickimplementation, and then have them available downstream.

[404nnotfoundddd]

Is the issue here that, redirect actually answers back to the client. The browser then follows the redirect Location header, but, it doesn't include any other headers it receives from the server, when doing so. This is likely what's happening here.

To get pathnames in Server Components, if you can build them within the entry page.tsx, you can use the cache trickimplementation, and then have them available downstream.

Can you explain this more, I don't understand it "if you can build them within the entry page.tsx, you can use the cache trickimplementation, and then have them available downstream."

[icyJoseph]

Like, you can make something lke:

// pseudo-code !-----
const createContainer = cache(() => {
    const container = { current: null };
    const getter = () => container.current;
    const setter = (next) => { container.current = next };
    return [getter, setter]
});

export const [getSomeData, setSomeData] = createContainer();

And now you can set some data, at page level for example, with the pathname, and then get it down in the SSR tree. Importantly, this only works during the SSR pass, and because it uses cache it is scope to the current request.

Here's an actual demo of it: https://stackblitz.com/edit/nextjs-q3dnp8?file=app%2Fpage.tsx,app%2FLocaleSwitch.tsx,app%2F[locale]%2Fpage.tsx,app%2Fserver-context.ts - using a Map instead

And a more long winded explanation: #63298 (comment)

And an NPM package that implements this nicely for you: https://www.npmjs.com/package/server-only-context

[404nnotfoundddd]

Like, you can make something lke:

// pseudo-code !-----
const createContainer = cache(() => {
    const container = { current: null };
    const getter = () => container.current;
    const setter = (next) => { container.current = next };
    return [getter, setter]
});

export const [getSomeData, setSomeData] = createContainer();

And now you can set some data, at page level for example, with the pathname, and then get it down in the SSR tree. Importantly, this only works during the SSR pass, and because it uses cache it is scope to the current request.

Here's an actual demo of it: https://stackblitz.com/edit/nextjs-q3dnp8?file=app%2Fpage.tsx,app%2FLocaleSwitch.tsx,app%2F[locale]%2Fpage.tsx,app%2Fserver-context.ts - using a Map instead

And a more long winded explanation: #63298 (comment)

And an NPM package that implements this nicely for you: https://www.npmjs.com/package/server-only-context

I checked your reply and the npm package you mentioned and thanks it solved my prop drilling issue, but is the header not being included when using location/redirect the default behavior of the browser or is it a nexjts error? should the issue remain open

[icyJoseph]

You can do a little experiment. Open the browser Network on DevTools, and check the preserve log option.

Then do the navigation that does your redirect.

Inspect the headers sent by the browser upon redirect, when it follows the location header.

Or you could just trust this Stack overflow answer, https://stackoverflow.com/a/1969728

[404nnotfoundddd]

I see, thanks my problem is solved