cookies

La fonction cookies permet de lire les cookies des requêtes HTTP entrantes dans un Composant Serveur (Server Component) ou d'écrire des cookies dans les requêtes sortantes via une Action Serveur (Server Action) ou un Gestionnaire de Route (Route Handler).

Bon à savoir : cookies() est une Fonction Dynamique (Dynamic Function) dont les valeurs retournées ne peuvent pas être connues à l'avance. Son utilisation dans une mise en page (layout) ou une page activera le rendu dynamique (dynamic rendering) au moment de la requête.

cookies().get(nom)

Une méthode qui prend un nom de cookie et retourne un objet avec le nom et la valeur. Si aucun cookie avec ce nom n'est trouvé, elle retourne undefined. Si plusieurs cookies correspondent, seul le premier match est retourné.

import { cookies } from 'next/headers'

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

cookies().getAll()

Une méthode similaire à get, mais qui retourne une liste de tous les cookies correspondant à un nom. Si nom n'est pas spécifié, elle retourne tous les cookies disponibles.

import { cookies } from 'next/headers'

export default function Page() {
  const cookieStore = cookies()
  return cookieStore.getAll().map((cookie) => (
    <div key={cookie.name}>
      <p>Nom : {cookie.name}</p>
      <p>Valeur : {cookie.value}</p>
    </div>
  ))
}

cookies().has(nom)

Une méthode qui prend un nom de cookie et retourne un booléen indiquant si le cookie existe (true) ou non (false).

import { cookies } from 'next/headers'

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

cookies().set(nom, valeur, options)

Une méthode qui prend un nom de cookie, une valeur et des options, puis définit le cookie dans la requête sortante.

Bon à savoir : HTTP n'autorise pas la définition de cookies après le début du streaming, vous devez donc utiliser .set() dans une Action Serveur (Server Action) ou un Gestionnaire de Route (Route Handler).

'use server'

import { cookies } from 'next/headers'

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

Suppression de cookies

Bon à savoir : Vous ne pouvez supprimer des cookies que dans une Action Serveur (Server Action) ou un Gestionnaire de Route (Route Handler).

Plusieurs options existent pour supprimer un cookie :

cookies().delete(nom)

Vous pouvez supprimer explicitement un cookie avec un nom donné.

'use server'

import { cookies } from 'next/headers'

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

cookies().set(nom, '')

Alternativement, vous pouvez définir un nouveau cookie avec le même nom et une valeur vide.

'use server'

import { cookies } from 'next/headers'

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

Bon à savoir : .set() n'est disponible que dans une Action Serveur (Server Action) ou un Gestionnaire de Route (Route Handler).

cookies().set(nom, valeur, { maxAge: 0 })

Définir maxAge à 0 expirera immédiatement un cookie.

'use server'

import { cookies } from 'next/headers'

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

cookies().set(nom, valeur, { expires: timestamp })

Définir expires à une valeur dans le passé expirera immédiatement un cookie.

'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 })
}

Bon à savoir : Vous ne pouvez supprimer que les cookies appartenant au même domaine depuis lequel .set() est appelé. De plus, le code doit être exécuté sur le même protocole (HTTP ou HTTPS) que le cookie que vous souhaitez supprimer.

Historique des versions