使用 Next js 时出现以下错误。 我正在使用 axios 作为 http 客户端构建身份验证管道

Question

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;
  }
}

Answer 1

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