Max Schmitt

July 11 2023

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 from npm. It weighs only 700 bytes minified, has no external dependencies and works even on super-old browsers.


Since this article was written, the original author of cookie-cutter unfortunately removed his npm and GitHub accounts. The package is still available on npm but it might be removed in the future.

There is a fork available at @boiseitguru/cookie-cutter that you might want to consider using instead.


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