How To Send A Cookie In getServerSideProps Next.JS - Complete Guide

Next.js is a popular server-side rendering framework that offers a variety of powerful features for building modern web applications. One important aspect of web application development is managing user credentials, which typically involves the use of cookies. In this article, we will focus on how to send a cookie in getServerSideProps function in Next.js to manage user sessions and permissions. 
﻿
getServerSideProps is executed on the server, specifically within the Node.js runtime environment. This is in contrast to client-side rendering, where the browser executes JavaScript to fetch and render data on the client-side. 
﻿
It's important to note that it is only executed on the initial page load. Subsequent client-side navigations within the application are handled by the client-side JavaScript.
﻿
How To Access A Cookie In getServerSideProps﻿
You can access the request headers in the context parameter including the cookie: context.req.headers.cookie.  

export async function getServerSideProps(context) {
  // Access the cookies sent by the client
  const cookie = context.req.headers.cookie;

  // Return data to be rendered by the page
  return {
    props: {
      data: {}
    }
  }
}

How To Send A Cookie In getServerSideProps﻿
Unlike request executed in the browser, you need to explicitly includes the cookie in your request:

headers: {
      cookie: cookie,
}

Using Fetch API


export async function getServerSideProps(context) {
  // Access the cookies sent by the client
  const cookie = context.req.headers.cookie;

  // Send a request to the server with the cookie
  const response = await fetch("https://example.com/api/data", {
    credentials: "include",
    method: "GET",
    headers: {
      'Cookie': cookie || ''
    }
  });

  // Return data to be rendered by the page
  return {
    props: {
      data: await response.json(),
    },
  };
}

This way, the cookie is sent along with the request and can be retrieved on the server side by accessing req.headers.cookie. You can then use the cookie value as needed in your server-side code.

Using Axios

To access and send cookies with axios in a Next.js getServerSideProps function, you can pass the headers property in the Axios configuration object. Here's an example:

import axios from "axios";

export async function getServerSideProps(context) {
  // Access the cookies sent by the client
  const cookie = context.req.headers.cookie;

  // Send a request to the server with the cookie
  const response = await axios.get("https://example.com/api/data", {
    withCredentials: true,
    headers: {
      Cookie: cookie,
    },
  });

  // Return data to be rendered by the page
  return {
    props: {
      data: response.data,
    },
  };
}

In this article, we have learned how to access and send a cookie in the getServerSideProps function in Next.js. We can explicitly add a cookie to a request by including it in the request headers using the Cookie header field. When using getServerSideProps, we can retrieve the cookie value from the req.headers.cookie property, and then pass it as the value of the Cookie header in the fetch request.
﻿
With these techniques, we can work with cookies in Next.js to store and retrieve user-specific data on the server side, such as authentication tokens or session data. By using cookies, we can maintain stateful user sessions and provide a personalized user experience for each user.
﻿
What we have to know:
﻿
getServerSideProps  run on the server (Node.js) not in the browser.
context.req.headers.cookie is the way to access cookie in getServerSideProps
You need to explicitly add Cookie headers in your request
﻿
You're welcome! I hope this was helpful. If you have any questions or feedback, please feel free to leave a comment below. I always appreciate hearing from my readers!

By Mahady Manana, Fullstack Javascript Developer

16 February 2023 at 10 h 26

"Skills are honed through the interplay of learning and teaching - one must learn in order to teach, and teach in order to truly learn”. As a passionate Javascript developer, I enjoy sharing my knowledge and skills with others, and regularly publish tutorials on my website and other platforms about the latest Javascript, Typescript, Node.js, React.js, Next.js and more to help others learn and stay up to date with the latest developments trends.