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.

middleware.ts
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. 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) })