How do cookies in the browser work with Next.js?

[mersiades]

Summary

I'm having trouble wrapping my head around the cookie logic regarding server-side and browser-side functionality in Next.js.

I'd like to be able to delete some cookies from the browser when the user logs out (No, these cookies are not used for user authentication), but I can't find a way to delete them.

The cookies are fetched from a RESTful api and set using this code, which is a Server Action:

export const setS3Cookie = async () => {
  const c = cookies();
  const responseCookies = await Api.getS3Cookies();
  responseCookies.forEach((rc) => c.set(rc));
};

This is executed server-side, but the cookies appear in the browser (ie, you can see them in the application tab in Chrome dev tools).

One thing I don't understand is why does cookies().set(), which is from next/headers and presumably sets the cookie headers on outgoing HTTP requests, put the cookies in the browser client-side?

I need the client to have these cookies so that when an <img/> or <video/> element makes a request to the src url, the cookies are attached to the media request (for authentication with an S3 bucket).

But those cookies should be cleared when the user logs out.

This Server Action doesn't 'delete' cookies, but will set value to empty string and expiry to a date in the past:

export const deleteCookies = async () => {
  cookies().delete('KEY');
};

But the cookies in the browser remain untouched. How can I clear the cookies from the browser as well? If setting cookies from server side also sets them in the browser, then shouldn't deleting/modifying cookies server-side also change the cookies in the browser? What am I missing here?

Additional information

`document.cookie` returns `undefined`

I also tried the `cookies-next` package but that didn't help.

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.3.0: Thu Jan  2 20:24:16 PST 2025; root:xnu-11215.81.4~3/RELEASE_ARM64_T6000
  Available memory (MB): 16384
  Available CPU cores: 10
Binaries:
  Node: 18.19.1
  npm: 10.2.4
  Yarn: 1.22.22
  pnpm: 10.7.0
Relevant Packages:
  next: 14.2.4 // An outdated version detected (latest is 15.3.1), upgrade is highly recommended!
  eslint-config-next: 14.2.4
  react: 19.0.0
  react-dom: 19.0.0
  typescript: 5.8.2

Example

No response

[icyJoseph]

When you do delete the cookie, could you see the Response Headers on that request, and post back the Set-Cookie header? Of course, remove, change any sensitive data.

• https://www.rfc-editor.org/rfc/rfc6265.html

to remove a cookie, the server returns a Set-Cookie header
with an expiration date in the past. The server will be successful
in removing the cookie only if the Path and the Domain attribute in
the Set-Cookie header match the values used when the cookie was
created.

[mersiades]

One thing I don't understand is why does cookies().set(), which is from next/headers and presumably sets the cookie headers on outgoing HTTP requests, put the cookies in the browser client-side?

Thanks, @icyJoseph now I understand how this works: A Server Action is an HTTP post request to the server. The setS3Cookies Server Action has Set-Cookie headers in the response, which is how the cookies get set in the browser.

Understanding that, it was easy to find the problem: the cookie domain in the Set-Cookie headers for deleting the cookies didn't match the domain for the cookies they were supposed to be clearing (the cookies from the REST api didn't include the subdomain in the domain).