Next.js Discord

Discord Forum

Access new visitor cookie on server components

Answered
Narrow-barred Spanish mackerel posted this in #help-forum
Open in Discord
Narrow-barred Spanish mackerelOP
Hi everyone. I’m not really new to Next.js but there’s something that I’m trying to achieve with Next.js 13 and I’m having a lot of trouble.

When a new visitor comes to the site (home page or any other) I run middleware that sets a new visitor cookie (visitorId). Since it’s set on the response, I don’t have a way to access it on the server components using ‘cookies()’ (since these are coming from request.cookies.

I’ve tried redirecting middleware to itself with ‘set-cookie’ header which successfully sets the cookie and I’m able to access it on the server. There’s only one downside, if a crawler/bot tries to point to my website they run into endless redirect (because setting cookies are not allowed).

I’m looking for a solution:
- check if visitorId cookie exists
- if not, we generate a new visitorId in the middleware, try to set it in the cookies
- in case it’s a bot/crawler that doesn’t allow setting cookies, I want a fallback logic that would guarantee I always have some visitor id available on server components (as well as client)

In the past, since i had access to req and res values on getServerSideProps, i could just check res.cookies but not sure how this can be achieved in NextJs 13. :next1:
Answered by tafutada777
do you mean that you want to pass a value from middleware to Server Component via headers like this?

export function middlewareHeader(request: NextRequest) {
    // Clone the request headers and set a new header `x-hello-from-middleware1`
    const requestHeaders = new Headers(request.headers)
    requestHeaders.set('x-hello-from-middleware1', 'hello') // this won't be sent to the client

    // You can also set request headers in NextResponse.rewrite
    const response = NextResponse.next({
        request: {
            // New request headers
            headers: requestHeaders,
        },
    })

    // Set a new response header `x-hello-from-middleware2`
    response.headers.set('x-hello-from-middleware2', 'hello') // this will be sent to the client
    return response
}
View full answer

6 Replies

tafutada777
here is how to get a cookie inside of a Server Component.

import {cookies} from 'next/headers';

export default async function MySession() {
    const cookieStore = cookies();
    const token = cookieStore.get(MY_TOKEN);
but read only. cannot update it. (only Route Handler and Server Action can modify cookies )
@tafutada777 here is how to get a cookie inside of a Server Component. typescript import {cookies} from 'next/headers'; export default async function MySession() { const cookieStore = cookies(); const token = cookieStore.get(MY_TOKEN);
Narrow-barred Spanish mackerelOP
Yes, I understand how we get the request cookie on server components. My question is around response cookies, the ones that are set during that request (in the middleware)
tafutada777
do you mean that you want to pass a value from middleware to Server Component via headers like this?

export function middlewareHeader(request: NextRequest) {
    // Clone the request headers and set a new header `x-hello-from-middleware1`
    const requestHeaders = new Headers(request.headers)
    requestHeaders.set('x-hello-from-middleware1', 'hello') // this won't be sent to the client

    // You can also set request headers in NextResponse.rewrite
    const response = NextResponse.next({
        request: {
            // New request headers
            headers: requestHeaders,
        },
    })

    // Set a new response header `x-hello-from-middleware2`
    response.headers.set('x-hello-from-middleware2', 'hello') // this will be sent to the client
    return response
}
Answer