cookies

Die cookies-Funktion ermöglicht das Lesen von eingehenden HTTP-Request-Cookies in einer Server-Komponente (Server Component) oder das Schreiben von ausgehenden Request-Cookies in einer Server-Aktion (Server Action) oder einem Route-Handler (Route Handler).

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.

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, gibt jedoch eine Liste aller Cookies mit passendem name zurück. 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>Value: {cookie.value}</p>
    </div>
  ))
}

cookies().has(name)

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

import { cookies } from 'next/headers'

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

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

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

Gut zu wissen: HTTP erlaubt kein 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 delete(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 delete(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 delete(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 delete(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 gleichen 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