Next.js Discord

Discord Forum

Set up request headers for first time visitor

Unanswered
Black and yellow mud dauber posted this in #help-forum
Open in Discord
Black and yellow mud dauberOP
Is it possible somehow to set a cookie to the headers of 'GET' request, when the visitor first time access the website? I think that should be done using 'NextResponse, NextRequest' but at least I haven't managed to make it work...

33 Replies

Black and yellow mud dauberOP
The cookie(s) headers should be here, but I haven't figured out how to do it. To the response I am able to set headers
riský
you can use middleware and if they don't have the cookie, you can add it to them
Black and yellow mud dauberOP
All right, I'll try that
Black and yellow mud dauberOP
So, I used this example to set request headers.
https://nextjs.org/docs/app/building-your-application/routing/middleware#setting-headers

I tried to change the "Sec-Fetch-Mode" from 'no-cors' -> 'cors', but it doesn't change?

The headers for response does work tho.

Here is the middleware.tsx what I tried:

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
// Clone the request headers and set a new header x-hello-from-middleware1
const requestHeaders = new Headers(request.headers)
requestHeaders.set('Sec-Fetch-Mode', 'cors')
// You can also set request headers in NextResponse.rewrite
const response = NextResponse.next({
request: {
// New request headers
headers: requestHeaders,
},
})
return response
}
riský
try the headers api: https://nextjs.org/docs/app/api-reference/functions/headers (wait i need to see if this is even a thing with .set)
@Black and yellow mud dauber actually can you try the next config: https://nextjs.org/docs/app/api-reference/next-config-js/headers
@riský <@299391526650249217> actually can you try the next config: <https://nextjs.org/docs/app/api-reference/next-config-js/headers>
Black and yellow mud dauberOP
Oh, damn. I have totally missed this one
riský
yeah i kinda forgot about it, and i think it is actually easier
@riský also, i think that is the right way, and it may have just not been executing (either from wrong file path or not in paths set), but try the config way before fixing this
Black and yellow mud dauberOP
Yeah it should be the right way, but currently I don't have any idea why it doesn't add.. Also I am wondering am I able to set up JWT (or some random hashed value) if I just make the config file add the headers?
riský
well whats you files location relative to where the package.json file is (sending screenshot of file tree in ide is good enough)... and whats your full middleware file code... and what is the url you are accessing?
Black and yellow mud dauberOP
"and whats your full middleware file code"
It's the one I posted here.

the Url is https://localhost:3000/
riský
try middleware.ts
Black and yellow mud dauberOP
No effect
riský
and if you console.log inside, anything?
Black and yellow mud dauberOP
Nope, the fetch mode didn't change
riský
i mean did anything show in console
Black and yellow mud dauberOP
No
riský
o.O
Black and yellow mud dauberOP
all I get to the terminal is that the nextjs is running and in browser console, there is nothing. The middleware does work like it should, but I don't clearly have any idea why it doesn't change/set the request headers : D
riský
ill look at this tmr again, i go to sleep rn (best of luck)
Black and yellow mud dauberOP
Yeah no problem. Thanks for trying to help, I will try some other approaches later today / tomorrow
riský
but last thing, can you try adding matcher in the middleware config and make that root and all (it may be picky but idk) and make sure you are n latest version 🙂
Black and yellow mud dauberOP
I'll try that tomorrow, now im pretty much tired and annoyed that I can't handle this, haha.
I'll let u know how it goes, thanks again. Later.
Black and yellow mud dauberOP
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export const config = {
matcher: '/'
}

export function middleware(request: NextRequest) {
const requestHeaders = new Headers(request.headers)

requestHeaders.set('Sec-Fetch-Mode', 'cors')

const response = NextResponse.next({
request: {
headers: requestHeaders,
},
})
return response
}

🤷‍♀️
riský
try putting the middleware file in the root folder evern though you should be able to use src (but i really don't know)
Black and yellow mud dauberOP
I tried to put the middleware to
/src/middleware
/src/app/middleware
/middleware

No effect 😄
riský
and latest version of packages with reset .next folder and fresh build still has brokeness?
Black and yellow mud dauberOP
I am running Next.js 13.5.4

Should be the latest version bcs I am able to use the experimental https
With custom server I am able to set up request headers. But with custom server I lose so many nextjs features
Black and yellow mud dauberOP
I think the cookie method does the job in my case

import { NextResponse } from 'next/server';

export function middleware() {
const response = NextResponse.next()
response.cookies.set('test', '12345', {
httpOnly: true
})
return response
}
riský
o.O it worked by setting cookies... but not headers 😭