小编vbp*_*wrr的帖子

我正在将项目从 React 转移到 nextjs 并遇到问题。我有一个处理登录上下文并使用本地存储的全局包装器。我在顶部设置了“use client”指令，但该组件也尝试在服务器上呈现，并且此代码给出了水合错误：

export function AuthProvider(props) {
  
  const initialParsedToken =  typeof localStorage !== 'undefined' ? localStorage.getItem("jwt") : null

  if (initialParsedToken) {
    const decodedToken = jwtDecode<JwtInterface>(initialParsedToken);

    if (decodedToken.exp * 1000 < Date.now()) {
      localStorage.removeItem("token");
    } else {
      initialState.user = decodedToken;
    }
  }

  const [state, dispatch] = useReducer(authReducer, initialState);

  if (typeof localStorage === 'undefined'){
    return null
  }

  const login = (userData: any) => {
    localStorage.setItem("jwt", userData.token);
    dispatch({ type: "LOGIN", payload: userData });
  };

  function logout() {
    localStorage.removeItem("jwt"); …