Is it possible to set a server-side cookie in Next.js?

Matthew C.

—April 15, 2024

The Problem

You want to set a cookie on the server in your Next.js application. For example, you may have an e-commerce website that has Google adverts. If a user clicks on an ad for a summer sale page on your e-commerce website, the e-commerce website is opened with the following campaign parameter in the URL:

https://www.yourecommercewebsite/shop?campaign=summer_sale

You want to save this information in a cookie to personalize the user’s next browsing sessions by adding more content relevant to the summer sale when they visit your e-commerce website again.

How do you set the cookie on the server side to store this information?

The Solution

You can set a server-side cookie in Next.js. If you are using the Next.js app directory, use the Next.js cookies function.

The cookies function allows you to create cookies in a Server Action or a Route Handler.

For example, if you want to set a cookie based on URL parameters, you can create a page in your src/app folder:

import Campaigns from "@/components/Campaigns";

export default function Home() {
  return <Campaigns />;
}

Then create a Client Component in src/components/Campaigns.tsx that can read the current URL and call a Server Action to create a campaign cookie:

import { createCampaignCookie } from "@/app/actions";
import { useSearchParams } from "next/navigation";

export default function Campaigns() {
  const searchParams = useSearchParams();

  function handleClick() {
    const campaign = searchParams.get("campaign");
    createCampaignCookie(campaign || "");
  }

  return <button onClick={handleClick}>View all Summer Sale deals</button>;
}

In this example code, the useSearchParams Client Component hook is used to read the URL query string. It gets the value for the "campaign" search parameter. When a user clicks on the “View all Summer Sale deals” button, the createCampaignCookie Server Action is called. The user clicking on the button shows that they interacted with the page.

This Server Action can be defined in the src/app/actions.ts file:

"use server";

import { cookies } from "next/headers";

export async function createCampaignCookie(value: string) {
  if (value === "") return;
  cookies().set({
    name: "campaign",
    value: value,
    httpOnly: true,
    secure: true,
    path: "/",
  });
}

When a user clicks on the button, the Server Action creates a cookie in the user’s browser. You can then do a check for the cookie in a Server Component using the cookies().get() method to serve the user-customized content.

If you’re using the Next.js pages directory, use the cookies method of the NextResponse interface to create or read cookies. You can use this method in an API route or the getServerSideProps function.

Note that you should let your users know what types of cookies are used on your website for their privacy and to comply with regulations such as the General Data Privacy Regulation (GDPR) in the European Union.