Así que este es un tipo de error extraño. Lo que estoy tratando de hacer en mi aplicación Next.js es consolar el contenido del registro de una llamada a la API para ver qué obtengo. Esta función API solo verifica si un usuario ha iniciado sesión y, de ser así, mostraré una determinada sección de código. De mi archivo de acciones auth.js que obtiene una cookie que contiene información de usuario de un usuario que inició sesión desde el almacenamiento local:
export const isAuth = () => { if (process.browser) { const cookieChecked = getCookie('token'); if (cookieChecked) { if (localStorage.getItem('user')) { return JSON.parse(localStorage.getItem('user')); } else { return false; } } }};
En mi carpeta de páginas tengo un archivo [username].js donde en este momento solo estoy tratando de registrar cierta información sobre el usuario en este caso, el nombre de usuario:
{ isAuth().username ? console.log(isAuth().username) : "" } Incluso estoy comprobando para asegurarme de que esté configurado, sin embargo, incluso entonces obtengo un TypeError: Cannot read property 'username' of undefined
Sin embargo, si registro todo el objeto de usuario { isAuth() ? console.log(isAuth()) : "" } la consola registra correctamente. Esto es lo que se devuelve:
{ "_id": "5f7a39ab7acc30a29c5280df", "username": "dylancougar", "name": "Dylan Cougar", "role": 2}Entonces, toda la información está ahí, sin embargo, cuando trato de aislar cualquier información en el objeto, aparece el error. Aún más extraño es de vez en cuando si el código de bit infractor está comentado, y lo descomento y lo guardo, en realidad funcionará a veces, sin embargo, si vuelvo a cargar la página, vuelve el error. No soy un experto en Next.js, así que tal vez hay algo obvio que estoy pasando por alto.
El problema aquí es que next.js presenta sus datos en el servidor primero y process.browser no está definido en el servidor. Así que haz lo siguiente:
export const isAuth = () => { let user = false if (process.browser) { const cookieChecked = getCookie('token'); if (cookieChecked) { if (localStorage.getItem('user')) { user = JSON.parse(localStorage.getItem('user')); return user; } } } return user;Esto debería funcionar.