mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
Rename variable `cookieList` to `cookieStore` in [documentation example](https://nextjs.org/docs/app/api-reference/functions/cookies#cookieshasname) to be aligned with every other example in the same page ([here](https://github.com/KonkenBonken/next.js/blob/51b878f5a30c01c8fa3ba7a227becea951909c99/docs/02-app/02-api-reference/04-functions/cookies.mdx#L23) and [here](https://github.com/KonkenBonken/next.js/blob/51b878f5a30c01c8fa3ba7a227becea951909c99/docs/02-app/02-api-reference/04-functions/cookies.mdx#L37) compared to [here](https://github.com/KonkenBonken/next.js/blob/51b878f5a30c01c8fa3ba7a227becea951909c99/docs/02-app/02-api-reference/04-functions/cookies.mdx#L55)) I see no deliberate reason the [third example](https://github.com/KonkenBonken/next.js/blob/51b878f5a30c01c8fa3ba7a227becea951909c99/docs/02-app/02-api-reference/04-functions/cookies.mdx#L51-L59) should differ from the rest. Co-authored-by: Steven <[email protected]>
158 lines
5.0 KiB
Plaintext
158 lines
5.0 KiB
Plaintext
---
|
|
title: cookies
|
|
description: API Reference for the cookies function.
|
|
related:
|
|
title: Next Steps
|
|
description: For more information on what to do next, we recommend the following sections
|
|
links:
|
|
- app/building-your-application/data-fetching/server-actions-and-mutations
|
|
---
|
|
|
|
The `cookies` function allows you to read the HTTP incoming request cookies from a [Server Component](/docs/app/building-your-application/rendering/server-components) or write outgoing request cookies in a [Server Action](/docs/app/building-your-application/data-fetching/server-actions-and-mutations) or [Route Handler](/docs/app/building-your-application/routing/route-handlers).
|
|
|
|
> **Good to know**: `cookies()` is a **[Dynamic Function](/docs/app/building-your-application/rendering/server-components#server-rendering-strategies#dynamic-functions)** whose returned values cannot be known ahead of time. Using it in a layout or page will opt a route into **[dynamic rendering](/docs/app/building-your-application/rendering/server-components#dynamic-rendering)** at request time.
|
|
|
|
## `cookies().get(name)`
|
|
|
|
A method that takes a cookie name and returns an object with name and value. If a cookie with `name` isn't found, it returns `undefined`. If multiple cookies match, it will only return the first match.
|
|
|
|
```jsx filename="app/page.js"
|
|
import { cookies } from 'next/headers'
|
|
|
|
export default function Page() {
|
|
const cookieStore = cookies()
|
|
const theme = cookieStore.get('theme')
|
|
return '...'
|
|
}
|
|
```
|
|
|
|
## `cookies().getAll()`
|
|
|
|
A method that is similar to `get`, but returns a list of all the cookies with a matching `name`. If `name` is unspecified, it returns all the available cookies.
|
|
|
|
```jsx filename="app/page.js"
|
|
import { cookies } from 'next/headers'
|
|
|
|
export default function Page() {
|
|
const cookieStore = cookies()
|
|
return cookieStore.getAll().map((cookie) => (
|
|
<div key={cookie.name}>
|
|
<p>Name: {cookie.name}</p>
|
|
<p>Value: {cookie.value}</p>
|
|
</div>
|
|
))
|
|
}
|
|
```
|
|
|
|
## `cookies().has(name)`
|
|
|
|
A method that takes a cookie name and returns a `boolean` based on if the cookie exists (`true`) or not (`false`).
|
|
|
|
```jsx filename="app/page.js"
|
|
import { cookies } from 'next/headers'
|
|
|
|
export default function Page() {
|
|
const cookieStore = cookies()
|
|
const hasCookie = cookieStore.has('theme')
|
|
return '...'
|
|
}
|
|
```
|
|
|
|
## `cookies().set(name, value, options)`
|
|
|
|
A method that takes a cookie name, value, and options and sets the outgoing request cookie.
|
|
|
|
> **Good to know**: HTTP does not allow setting cookies after streaming starts, so you must use `.set()` in a [Server Action](/docs/app/building-your-application/data-fetching/server-actions-and-mutations) or [Route Handler](/docs/app/building-your-application/routing/route-handlers).
|
|
|
|
```js filename="app/actions.js"
|
|
'use server'
|
|
|
|
import { cookies } from 'next/headers'
|
|
|
|
async function create(data) {
|
|
cookies().set('name', 'lee')
|
|
// or
|
|
cookies().set('name', 'lee', { secure: true })
|
|
// or
|
|
cookies().set({
|
|
name: 'name',
|
|
value: 'lee',
|
|
httpOnly: true,
|
|
path: '/',
|
|
})
|
|
}
|
|
```
|
|
|
|
## Deleting cookies
|
|
|
|
> **Good to know**: You can only delete cookies in a [Server Action](/docs/app/building-your-application/data-fetching/server-actions-and-mutations) or [Route Handler](/docs/app/building-your-application/routing/route-handlers).
|
|
|
|
There are several options for deleting a cookie:
|
|
|
|
### `cookies().delete(name)`
|
|
|
|
You can explicitly delete a cookie with a given name.
|
|
|
|
```js filename="app/actions.js"
|
|
'use server'
|
|
|
|
import { cookies } from 'next/headers'
|
|
|
|
async function delete(data) {
|
|
cookies().delete('name')
|
|
}
|
|
```
|
|
|
|
### `cookies().set(name, '')`
|
|
|
|
Alternatively, you can set a new cookie with the same name and an empty value.
|
|
|
|
```js filename="app/actions.js"
|
|
'use server'
|
|
|
|
import { cookies } from 'next/headers'
|
|
|
|
async function delete(data) {
|
|
cookies().set('name', '')
|
|
}
|
|
```
|
|
|
|
> **Good to know**: `.set()` is only available in a [Server Action](/docs/app/building-your-application/data-fetching/server-actions-and-mutations) or [Route Handler](/docs/app/building-your-application/routing/route-handlers).
|
|
|
|
### `cookies().set(name, value, { maxAge: 0 })`
|
|
|
|
Setting `maxAge` to 0 will immediately expire a cookie.
|
|
|
|
```js filename="app/actions.js"
|
|
'use server'
|
|
|
|
import { cookies } from 'next/headers'
|
|
|
|
async function delete(data) {
|
|
cookies().set('name', 'value', { maxAge: 0 })
|
|
}
|
|
```
|
|
|
|
### `cookies().set(name, value, { expires: timestamp })`
|
|
|
|
Setting `expires` to any value in the past will immediately expire a cookie.
|
|
|
|
```js filename="app/actions.js"
|
|
'use server'
|
|
|
|
import { cookies } from 'next/headers'
|
|
|
|
async function delete(data) {
|
|
const oneDay = 24 * 60 * 60 * 1000
|
|
cookies().set('name', 'value', { expires: Date.now() - oneDay })
|
|
}
|
|
```
|
|
|
|
> **Good to know**: You can only delete cookies that belong to the same domain from which `.set()` is called. Additionally, the code must be executed on the same protocol (HTTP or HTTPS) as the cookie you want to delete.
|
|
|
|
## Version History
|
|
|
|
| Version | Changes |
|
|
| --------- | --------------------- |
|
|
| `v13.0.0` | `cookies` introduced. |
|