The error: Server Error ReferenceError: localStorage is not defined This error happened while generating the page. Any console logs will be displayed in the terminal window.
import { LOGIN_SUCCESS, LOGIN_FAIL, LOGOUT } from "../actions/types";
const user = JSON.parse(localStorage.getItem("user"));
const initialState = user
? { isLoggedIn: true, user }
: { isLoggedIn: false, user: null };
export default function (state = initialState, action) {
const { type, payload } = action;
switch (type) {
case LOGIN_SUCCESS:
return {
...state,
isLoggedIn: true,
user: payload.user,
};
case LOGIN_FAIL:
return {
...state,
isLoggedIn: false,
user: null,
};
case LOGOUT:
return {
...state,
isLoggedIn: false,
user: null,
};
default:
return state;
}
}
It's related to server side rendering and client side rendering. As Next.js provides SSR, you need to consider using objects like window, localStorage and so on. While compiling client side, those objects are fine but when Nextjs compiles server side, it shows error like you shared.
You can use something like this:
let user = null;
if (typeof window !== "undefined") {
user = JSON.parse(localStorage.getItem("user"));
} else {
// ... server-side logic
}
For other solutions see here: https://dev.to/vvo/how-to-solve-window-is-not-defined-errors-in-react-and-next-js-5f97