How to use cookie inside `getServerSideProps` method in Next.js?

Question

I have to send current language on endpoint. But getting language from Cookie returns undefined inside getServerSideProps.

export async function getServerSideProps(context) {
    const lang = await Cookie.get('next-i18next')
    const res = await fetch(`endpoint/${lang}`)
    const data = await res.json()

    return {
        props: { data },
    }
}

export default Index;

What is the proper way to get cookie inside getServerSideProps?

Answer 1

You can get the cookies from the req.headers inside getServerSideProps:

export async function getServerSideProps(context) {
  const cookies = context.req.headers.cookie;
  return {
    props: {},
  };
}

You could then use the cookie npm package to parse them:

import * as cookie from 'cookie'

export async function getServerSideProps(context) {
  const parsedCookies = cookie.parse(context.req.headers.cookie);
  return { props: {} }
}

Answer 2

To avoid having to parse the cookies string from context.req.headers.cookie, Next.js also provides the cookies as an object which can be accessed with context.req.cookies.

export async function getServerSideProps(context) {
    const lang = context.req.cookies['next-i18next']
    
    // ...
    
}

From getServerSideProps documentation:

The req in the context passed to getServerSideProps provides built in middleware that parses the incoming request (req). That middleware is:

req.cookies - An object containing the cookies sent by the request. Defaults to {}

Answer 3

You can use parseCookies function with cookie package

import cookie from "cookie"

function parseCookies(req){
    return cookie.parse(req ? req.headers.cookie || "" : document.cookie);
}

And then get access like that.

export async function getServerSideProps({ req} ) {
  const cookies = parseCookies(req);

  // And then get element from cookie by name
  
  return { 
     props: {
        jwt: cookies.jwt,
     } 
  }
}

Answer 4

how are you doing? you can use Something like this :

export async function getServerSideProps(context) {
  console.log(context.req.cookies)
}

so easy and so beautifuly!

Answer 5

If you are using Axios this is very simple

• This will work inside getServerSideProps method. You can't get access to the cookie by using withCredentials because this is on the server.

const { token } = context.req.cookies;
  const response = await axios.get('/staff/single', {
    headers: { Cookie: `token=${token};` },
  });

• or try (This will work on the client)

  const response = await axios.get('/staff/single', {
    headers: { withCredentials: true },
  });

Answer 6

inside getServerSideProps function i want to make an authenticated get request to the server. I need to pass in headers {Authorization: Bearer ${storedJwt}, ...} the storedJWT is stored in the browser as a cookie , i tried to access it in the function using const storedJwt = Cookies.get("jwt");

(well i am using this package import Cookies from "js-cookie"; )

i think inside getServerSideProps i cannot access the Jwt stored in the Cookie

Answer 7

You can get the cookies from the context.res.getHeader('Set-Cookie') inside getServerSideProps:

export const getServerSideProps: GetServerSideProps = async (context) => {
    
      const cookieStore: ReturnType<typeof context.res.getHeader> =
        context.res.getHeader('Set-Cookie');
    
      const cookieStoreParsed: { [key: string]: string } = Array.isArray(
        cookieStore
      )
        ? getValuesFromCookie(cookieStore)
        : {};

// to be get value use cookieStoreParsed[SOME_COOKIE_NAME]
      console.log(cookieStoreParsed[SOME_COOKIE_NAME])
    
      return {
        props: {
          ...something you need
        },
      };
    };

Then use the cookie npm package to parse them:

import * as cookie from 'cookie'

const getValuesFromCookie = (cookieStore: string[]) =>
      cookieStore.reduce((acc: { [key: string]: string }, cookieElem: string) => {
        const cookieElemParsed = cookie.parse(cookieElem);
        return {
          ...acc,
          ...cookieElemParsed,
        };
      }, {});