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
	request.cookies.get('myCookieName')?.value

	// Get all cookies
	request.cookies.getAll()

	// To change a cookie, first create a response
	const response = NextResponse.next()

	// Set a cookie
	response.cookies.set('myCookieName', 'some-value')

	// Setting a cookie with additional options
	response.cookies.set({
		name: 'myCookieName',
		value: 'some-value',
		httpOnly: true,
	})

	// Delete a cookie
	response.cookies.delete('myCookieName')

	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
	cookies.get('myCookieName')

	// Set a cookie
	cookies.set('myCookieName', 'some-value', {
		httpOnly: true, // true by default
	})

	// Delete a cookie
	cookies.set('myCookieName')
}

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 from npm. 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
cookieCutter.get('myCookieName')

// Set a cookie
cookieCutter.set('myCookieName', 'some-value')

// Delete a cookie
cookieCutter.set('myCookieName', '', { expires: new Date(0) })