Almacenar Cookies y compartir en Server Side desde Client Side en Next.js

Tiempo de lectura: 2 minutos

Hoy vamos a aprender cómo podemos almacenar Cookies y compartirlas entre Client Side y Server Side usando React.

Para el tutorial de hoy vamos a utilizar la librería Nookies.

Esta librería nos solucionará el almacenamiento de Cookies de forma inmediata.

Primero vamos a crear un componente llamado CookieStorage.tsx

import nookies from 'nookies'

enum CookieKeys {
    DATO = 'dato',
}

//Configuración
export function getMaxAgeCookie() {
    return Number.MAX_SAFE_INTEGER;
}

export function setCookieDato(context: any, valor: string) {
    setCookies(context, CookieKeys.DATO, valor);
}

export function getCookieDato(context: any): string {
    return getCookies(context, CookieKeys.DATO);
}

//Borrar cookies
export function removeCookieDato(context: any) {
    nookies.destroy(context, CookieKeys.DATO);
}

export function getCookies(context: any, clave: CookieKeys): string {
    const cookies = nookies.get(context);
    return cookies[clave];
}

export function setCookies(context: any, clave: CookieKeys, valor: string) {
    nookies.set(context, clave, valor, {
        maxAge: getMaxAgeCookie(), // Tiempo de vida de la cookie al máximo
        path: '/', // La ruta en la que la cookie es válida (en este caso, la raíz del dominio)
    });
}

En este componente he creado una función para configurar las Cookies con el máximo tiempo de ciclo de vida. Además dos funciones para leer y escribir las Cookies.

Con las funciones setCookieDato y getCookieDato podremos obtener y guardar nuevas cookies.

Las cookies se guardan según la clave que se indica en el enum creado.

Para utilizarlo simplemente tendremos que invocar las funciones de la siguiente forma:

Client Side (desde React) el context se pasa a null:

setCookieDato(null, "Test");
getCookieDato(null);

Server Side (desde Next.js en getServerSideProps o getStaticProps) el context se pasa desde la función de Next:

export async function getServerSideProps(context: any) {
  ...

  setCookieDato(context, "Test");
  getCookieDato(context);
  ...
}