cookies

Die cookies-Funktion ermöglicht es Ihnen, HTTP-Cookies aus einer eingehenden Anfrage in einer Server-Komponente (Server Component) zu lesen oder ausgehende Cookies in einer Server-Aktion (Server Action) oder einem Route-Handler (Route Handler) zu setzen.

Gut zu wissen: cookies() ist eine dynamische Funktion (Dynamic Function), deren Rückgabewerte nicht im Voraus bekannt sind. Die Verwendung in einem Layout oder einer Seite aktiviert dynamisches Rendering (dynamic rendering) zur Laufzeit der Anfrage.

cookies().get(name)

Eine Methode, die einen Cookie-Namen entgegennimmt und ein Objekt mit Name und Wert zurückgibt. Wenn kein Cookie mit dem angegebenen name gefunden wird, gibt sie undefined zurück. Bei mehreren passenden Cookies wird nur der erste Treffer zurückgegeben.

import { cookies } from 'next/headers'

export default function Page() {
  const cookieStore = cookies()
  const theme = cookieStore.get('theme')
  return '...'
}

cookies().getAll()

Eine Methode ähnlich wie get, die jedoch eine Liste aller Cookies mit passendem name zurückgibt. Wenn name nicht angegeben ist, werden alle verfügbaren Cookies zurückgegeben.

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>Wert: {cookie.value}</p>
    </div>
  ))
}

cookies().has(name)

Eine Methode, die einen Cookie-Namen entgegennimmt und einen boolean zurückgibt, der angibt, ob der Cookie existiert (true) oder nicht (false).

import { cookies } from 'next/headers'

export default function Page() {
  const cookiesList = cookies()
  const hasCookie = cookiesList.has('theme')
  return '...'
}

cookies().set(name, value, options)

Eine Methode, die einen Cookie-Namen, Wert und Optionen entgegennimmt und den ausgehenden Cookie setzt.

Gut zu wissen: HTTP erlaubt nicht das Setzen von Cookies nach Beginn des Streamings, daher muss .set() in einer Server-Aktion (Server Action) oder einem Route-Handler (Route Handler) verwendet werden.

'use server'

import { cookies } from 'next/headers'

async function create(data) {
  cookies().set('name', 'lee')
  // oder
  cookies().set('name', 'lee', { secure: true })
  // oder
  cookies().set({
    name: 'name',
    value: 'lee',
    httpOnly: true,
    path: '/',
  })
}

Cookies löschen

Gut zu wissen: Cookies können nur in einer Server-Aktion (Server Action) oder einem Route-Handler (Route Handler) gelöscht werden.

Es gibt mehrere Möglichkeiten, einen Cookie zu löschen:

cookies().delete(name)

Sie können einen Cookie mit einem bestimmten Namen explizit löschen.

'use server'

import { cookies } from 'next/headers'

async function create(data) {
  cookies().delete('name')
}

cookies().set(name, '')

Alternativ können Sie einen neuen Cookie mit demselben Namen und einem leeren Wert setzen.

'use server'

import { cookies } from 'next/headers'

async function create(data) {
  cookies().set('name', '')
}

Gut zu wissen: .set() ist nur in einer Server-Aktion (Server Action) oder einem Route-Handler (Route Handler) verfügbar.

cookies().set(name, value, { maxAge: 0 })

Durch Setzen von maxAge auf 0 wird ein Cookie sofort ungültig.

'use server'

import { cookies } from 'next/headers'

async function create(data) {
  cookies().set('name', 'value', { maxAge: 0 })
}

cookies().set(name, value, { expires: timestamp })

Durch Setzen von expires auf einen Wert in der Vergangenheit wird ein Cookie sofort ungültig.

'use server'

import { cookies } from 'next/headers'

async function create(data) {
  const oneDay = 24 * 60 * 60 * 1000
  cookies().set('name', 'value', { expires: Date.now() - oneDay })
}

Gut zu wissen: Sie können nur Cookies löschen, die zur selben Domain gehören, von der .set() aufgerufen wird. Zudem muss der Code über dasselbe Protokoll (HTTP oder HTTPS) ausgeführt werden wie der zu löschende Cookie.

Versionsverlauf