Cómo obtener cookies del lado del servidor en una aplicación Next.js

Acceder a las cookies mientras se procesa en el lado del servidor en Next.js puede ser más difícil de lo que cree. Así es como lo resolví.

Tuve este problema. Mi aplicación dependía degalletaspara la autenticación, y usando Next.js aparentemente mis cookies no se establecieron en la inicialización de la primera página.

Tenía este código, que estaba a cargo de llegar a un punto final GET usandoAxios:

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

return { bookings: response.data } }

Tenía Passport.js en el extremo del lado del servidor, pero no pudo autenticar al usuario en la página SSR porque no encontró ninguna cookie.

Tuve que cambiar mi código a esto, agregando las cookies alheaders:

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 clave para hacer que las cookies estén disponibles en el backend fue agregar:

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

a la configuración de Axios.

Descarga mi gratisManual de Next.js


Más próximos tutoriales: