reactjs - ¿Cómo usar localStorage en Next.js y no obtener un error de hidratación?

Quiero usar el almacenamiento local para guardar un token y acceder a él,

Mi código se ve así:

if (typeof window !== 'undefined') {
    localStorage.setItem(key,value)
}

Si no uso la parte que verifica el tipo de ventana, obtengo el error:

localStorage no está definido

Pero eso parece conducir al error mencionado aquí en la documentación, el cual se puede arreglar eliminando la verificación de typeof window, ya que eso parece causar el error de hidratación cuando actualizo la página, que es:

La hidratación falló porque la interfaz de usuario inicial no coincide con lo que se representó en el servidor.

¿Alguna idea de qué hacer aquí?

Respuesta #1

Intenta acceder a localStorage dentro de un useEffect():

useEffect(() => {
  localStorage.setItem(key, value);
}, []);