CODEWITHSUNDEEP
javascriptcookiesnext.jsserver-side-rendering
Mammad Mammadli
Mammad Mammadli

Reputation: 372

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

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?

Upvotes: 19

Views: 60385

Answers (7)

Joodi
Joodi

Reputation: 11

install 'cookie' package and use this:

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

  return{
    props:{
    }
  }
}

Upvotes: 0

Dmitry Egorov
Dmitry Egorov

Reputation: 47

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,
        };
      }, {});

Upvotes: 1

AmirabbasGhasemi
AmirabbasGhasemi

Reputation: 309

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!

Upvotes: 5

MD SHAYON
MD SHAYON

Reputation: 8063

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 },
  });

Upvotes: 1

juliomalves
juliomalves

Reputation: 50378

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 {}

Upvotes: 25

james
james

Reputation: 5236

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: {} }
}

Upvotes: 29

Randall
Randall

Reputation: 2858

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,
     } 
  }
}

Upvotes: 5

Related Questions