# How to set a server-side cookie in Next.js

> If you are using the Next.js app directory, the Next.js cookies function allows you to create cookies in a Server Action or a Route Handler.

**URL:** https://sentry.io/answers/is-it-possible-to-set-a-server-side-cookie-in-next-js/

---

## 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`](https://nextjs.org/docs/app/api-reference/functions/cookies) function.

The `cookies` function allows you to create cookies in a [Server Action](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations) or a [Route Handler](https://nextjs.org/docs/app/building-your-application/routing/route-handlers).

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

```tsx
import Campaigns from "@/components/Campaigns";

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

Then create a [Client Component](https://nextjs.org/docs/app/building-your-application/rendering/client-components) in `src/components/Campaigns.tsx` that can read the current URL and call a Server Action to create a campaign cookie:

```tsx
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`](https://nextjs.org/docs/app/api-reference/functions/use-search-params) 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:

```typescript
"use server";

import { cookies } from "next/headers";

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

In Next.js 15+, `cookies()` returns a Promise that must be awaited before calling `.set()` or `.get()`.

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](https://nextjs.org/docs/app/building-your-application/rendering/server-components) using `(await cookies()).get()` to serve the user-customized content.

If you're using the Next.js pages directory, use the [`cookies`](https://nextjs.org/docs/pages/api-reference/functions/next-response#cookies) method of the [`NextResponse`](https://nextjs.org/docs/pages/api-reference/functions/next-response) interface to create or read cookies. You can use this method in an [API route](https://nextjs.org/docs/pages/building-your-application/routing/api-routes) or the [`getServerSideProps`](https://nextjs.org/docs/pages/api-reference/functions/get-server-side-props) 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](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies#tracking_and_privacy) such as the General Data Privacy Regulation (GDPR) in the European Union.

---

*Source: [sentry.io/answers/is-it-possible-to-set-a-server-side-cookie-in-next-js/](https://sentry.io/answers/is-it-possible-to-set-a-server-side-cookie-in-next-js/)*