Max SchmittMS
25th June 2020
27th February 2023 (updated)

Next.js: How to Get and Set Cookies (2023)

In a Next.js app, you might find yourself wanting to access cookies during server-side rendering (using getServerSideProps or getInitialProps), within an API route or when a user accesses a static page that was generated using getStaticProps.

If you're looking to implement HTTP-only cookies for authentication in Next.js, I've published a separate post on that topic.

Next.js Cookies with getStaticProps

When you're using Next.js as a static site generator, you can use Next.js middleware to get and set cookies.

You can't access cookies directly in getStaticProps because that function runs at build time and not at the time of the request.


import { NextResponse, NextRequest } from 'next/server'
export function middleware(request: NextRequest) {
// Get a cookie
// Get all cookies
// To change a cookie, first create a response
const response =
// Set a cookie
response.cookies.set('myCookieName', 'some-value')
// Setting a cookie with additional options
name: 'myCookieName',
value: 'some-value',
httpOnly: true
// Delete a cookie
return response

This also works for server-rendered pages.

Just be aware that middleware runs for every page in your project, so if you only want to get/set cookies for certain paths, you might want to use a matcher or manually check the pathname (request.nextUrl.pathname) in the middleware.

Next.js Cookies with getServerSideProps

When server-rendering a page in Next.js, you'll most-likely use getServerSideProps.

You can then use the cookies module to easily get and set cookies on the request / response objects:

import Cookies from 'cookies'
Homepage.getServerSideProps = ({ req, res }) => {
// Create a cookies instance
const cookies = new Cookies(req, res)
// Get a cookie
// Set a cookie
cookies.set('myCookieName', 'some-value', {
httpOnly: true // true by default
// Delete a cookie

Next.js Cookies with getInitialProps

Modern Next.js apps don't usually use getInitialProps.

When you do, you can get and set cookies on the server the same way as in getServerSideProps.

Remember that getInitialProps in a Next.js app can run on both server and client. You can detect where you're running by simply checking for the existence of ctx.req:

Homepage.getInitialProps = ({ req }) => {
const isServer = !!req
const isBrowser = !req
if (isServer) {
// Get/set cookies server-side
} else {
// Get/set cookies client-side

Client-side Cookies with Next.js

To easily get and set cookies in the browser with Next.js, I recommend using the excellent and tiny cookie-cutter module. It weighs only 700 bytes minified, has no external dependencies and works even on super-old browsers.

import cookieCutter from 'cookie-cutter'
// Get a cookie
// Set a cookie
cookieCutter.set('myCookieName', 'some-value')
// Delete a cookie
cookieCutter.set('myCookieName', '', { expires: new Date(0) })
Image of my head

About the author

Hi, I’m Max! I'm a fullstack JavaScript developer living in Berlin.

When I’m not working on one of my personal projects, writing blog posts or making YouTube videos, I help my clients bring their ideas to life as a freelance web developer.

If you need help on a project, please reach out and let's work together.

To stay updated with new blog posts, follow me on Twitter or subscribe to my RSS feed.