Next.js Discord

Discord Forum

Getting Headers for Cookies in a server component?

Answered
Persian posted this in #help-forum
Open in Discord
PersianOP
I'm not able to get my cookies from my server side component from some reason. On another page I have a client side component which does a POST fetch request to my API Route and grabs the cookie then I'm able to do whatever with that information. With a server component I'm trying to do the same POST fetch and it comes back as undefined from the API Route itself.

My server component is just like this:

export default async function Dashboard() {
    const { sessionId, error } = await fetchCookie();

    return (
        <div>
            <h2>Dashboard</h2>
            {error ? (
                <p>Error: {error}</p>
            ) : (
                <p>Session ID: {sessionId}</p>
            )}
        </div>
    );
}


The fetchCookie is nothing speical, just your regular fetch request. It works 100% if I do this in a client side component, just not server side.


The API Route:

import { NextResponse } from 'next/server';

export async function POST(req) {
    try {
        const cookies = req.cookies;
        console.log("Cookies:", cookies);

        const sessionCookie = cookies.get('sessionid') || 'No sessionid cookie';
        
        return NextResponse.json({ sessionId: sessionCookie }, { status: 200 });
    } catch (e) {
        console.error('Error:', e);
        return NextResponse.json({ error: 'Unable to retrieve cookie' }, { status: 400 });
    }
}
Answered by Persian
I got it working with middleware and being able to read it through the server component. Basic example:

import { NextResponse } from 'next/server'
 
// This function can be marked `async` if using `await` inside
export function middleware(req) {
  try {
    // Access cookies from the request
    const cookie = req.cookies.get("sessionid");
    console.log(cookie);

    const response = NextResponse.next();
    response.headers.set('X-Custom-Header', 'CustomHeaderValue');

    return response;
  } catch (e) {
      console.error('Error:', e);
      // Something to return just testing now
  }
}

export const config = {
  matcher: '/dashboard/:path*((?!_next|static|public|favicon.ico).*)'
}


Then my dashboard:

import { cookies } from 'next/headers';

export default function Dashboard() {
  const cookieStore = cookies();
  const myCookie = cookieStore.get('sessionid');

  return (
    <div>
      <p>Cookie value: {myCookie.value}</p>
    </div>
  );
}
View full answer

15 Replies

Should be able to use this to read the cookies in server component.
@Jboncz https://nextjs.org/docs/app/api-reference/functions/cookies
PersianOP
Thank you. I'll take a look. I also noticed my middleware never triggers. I'm using the format where I have app->dashboard->page.js and I'm putting my middleware.js in the app directory. My actual project goes further where I have different groups like app->(maingroup)->dashboard->page.js but it still never triggers. I was even trying to get this to work through middleware without success as it wont trigger.

Even the doc's test code for a simple re-direct doesn't work. Tried this to see if middleware even gets hit.

import { NextResponse } from 'next/server'
 
// This function can be marked `async` if using `await` inside
export function middleware(request) {
  return NextResponse.redirect(new URL('/login', request.url))
}

// See "Matching Paths" below to learn more
export const config = {
  matcher: '/dashboard/:path*',
}
Jboncz
Your middleware should side outside the app directory.
I use the src directory, but that changes nothing, just treat that as if its the main directory
export const config = {
    matcher: '/((?!_next|static|public|favicon.ico).*)'
}


Here is a matcher that matches on just about every page load itself, just so you can test is to make sure its not a matcher issue.
@Jboncz I use the src directory, but that changes nothing, just treat that as if its the main directory
PersianOP
Well you're a life saver!!! Every where I looked said to put it in the app directory. 😦
I put it into the root and it works. 🙂
Jboncz
No worries.
🙂
PersianOP
I'll read through the cookies page later and report back on this.
Jboncz
No problem, when you have verified its solved make sure to mark a solution. Dont forget to report back even if its succesful, people appreciate know that their assistance worked as intended 🙂
PersianOP
I got it working with middleware and being able to read it through the server component. Basic example:

import { NextResponse } from 'next/server'
 
// This function can be marked `async` if using `await` inside
export function middleware(req) {
  try {
    // Access cookies from the request
    const cookie = req.cookies.get("sessionid");
    console.log(cookie);

    const response = NextResponse.next();
    response.headers.set('X-Custom-Header', 'CustomHeaderValue');

    return response;
  } catch (e) {
      console.error('Error:', e);
      // Something to return just testing now
  }
}

export const config = {
  matcher: '/dashboard/:path*((?!_next|static|public|favicon.ico).*)'
}


Then my dashboard:

import { cookies } from 'next/headers';

export default function Dashboard() {
  const cookieStore = cookies();
  const myCookie = cookieStore.get('sessionid');

  return (
    <div>
      <p>Cookie value: {myCookie.value}</p>
    </div>
  );
}
Answer
PersianOP
I'll look through that link you showed and see about doing it without middleware so I at least know different ways to accomplish this.