如何在Next.js中从Local Storage设置Redux初始状态？

你的代码问题出在Next.js 的服务端渲染特性上：服务端环境没有 window 对象，而 localStorage 是 window 的属性，所以在服务端执行 setInitialLanguage() 时会直接报错。下面是修正方案：

1. 修正 Redux Slice 代码 #

先把初始状态设为默认值，添加一个专门用于初始化语言的 action，同时修正存储逻辑确保结构一致：

const initialState = {
  language: {
    lang: "eng",
    iconPath: "/imgFolder1/usaIcon.png",
    languageFullEng: "English",
    languageFullHeb: "אנגלית",
  },
};

const languageSlice = createSlice({
  name: "language",
  initialState,
  reducers: {
    setLanguage: (state, action) => {
      state.language = action.payload;
      // 直接存储选中的语言对象，而非整个 state
      localStorage.setItem("language", JSON.stringify(action.payload));
    },
    // 新增初始化语言的 action
    initLanguage: (state, action) => {
      state.language = action.payload;
    },
  },
});

export const { setLanguage, initLanguage } = languageSlice.actions;
export default languageSlice.reducer;

2. 创建客户端初始化组件 #

在客户端环境读取 Local Storage 并更新 Redux 状态，因为只有客户端才有 window 对象：

"use client"; // 必须标记为客户端组件

import { useEffect } from "react";
import { useDispatch } from "react-redux";
import { initLanguage } from "@/store/slices/languageSlice"; // 替换为你的 slice 路径

export default function LanguageInit() {
  const dispatch = useDispatch();

  useEffect(() => {
    const savedLang = localStorage.getItem("language");
    if (savedLang) {
      try {
        const parsedLang = JSON.parse(savedLang);
        dispatch(initLanguage(parsedLang));
      } catch (err) {
        console.error("读取本地语言配置失败:", err);
      }
    }
  }, [dispatch]);

  return null; // 该组件无需渲染可见内容
}

3. 在根布局中引入初始化组件 #

把这个初始化组件放到根布局里，确保每次客户端加载时都会执行初始化逻辑：

// app/layout.js 或 pages/_app.js（根据你的 Next.js 版本选择）
import LanguageInit from "./LanguageInit";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <LanguageInit />
        {children}
      </body>
    </html>
  );
}

关键说明 #

• 服务端渲染阶段不会执行 useEffect 里的代码，避免了访问 localStorage 导致的错误。
• 存储和读取的结构保持一致：存储的是 language 对象，读取后直接更新状态，避免结构不匹配的问题。

内容的提问来源于stack exchange，提问作者MD. MEHEDI IMAM