Comment obtenir des cookies côté serveur dans une application Next.js

Accéder aux cookies pendant le rendu côté serveur dans Next.js peut être plus difficile que vous ne le pensez. Voici comment je l'ai résolu.

J'ai eu ce problème. Mon application dépendait debiscuitspour l'authentification et en utilisant Next.js, apparemment, mes cookies n'ont pas été définis lors de l'initialisation de la première page.

J'avais ce code, qui était chargé d'atteindre un point de terminaison GET en utilisantAxios:

Bookings.getInitialProps = async ctx => {
  const response = await axios.get('http://localhost:3000/api/bookings/list')

return { bookings: response.data } }

J'avais Passport.js sur le point de terminaison côté serveur, mais il n'a pas réussi à authentifier l'utilisateur sur la page SSR, car il n'a trouvé aucun cookie.

J'ai dû changer mon code pour cela, en ajoutant les cookies à laheaders:

Bookings.getInitialProps = async ctx => {
  const response = await axios({
    method: 'get',
    url: 'http://localhost:3000/api/bookings/list',
    headers: ctx.req ? { cookie: ctx.req.headers.cookie } : undefined
  })

return { bookings: response.data } }

La clé pour rendre les cookies disponibles dans le backend était d'ajouter:

headers: ctx.req ? { cookie: ctx.req.headers.cookie } : undefined

à la configuration Axios.

Téléchargez mon gratuitManuel Next.js


Plus de prochains tutoriels: