NextJS结合next-i18next路由时主题Context重置问题求助

核心原因 #

使用getServerSideProps的页面会触发服务端重新渲染，此时_app.tsx里的WrapLayout会重新初始化，useState的默认值light会覆盖之前切换的dark主题状态。

解决方法 #

1. 将主题状态持久化到localStorage #

把主题状态存在客户端的localStorage中，代替单纯的useState，确保页面刷新或服务端渲染后能恢复之前的主题。

修改WrapLayout的状态管理逻辑：

import { useState, useEffect } from 'react';

function WrapLayout({ children }) {
  // 初始化时优先从localStorage取，没有则用light
  const [theme, setTheme] = useState(() => {
    if (typeof window !== 'undefined') {
      return localStorage.getItem('theme') || 'light';
    }
    return 'light';
  });

  // 主题切换时同步到localStorage
  useEffect(() => {
    localStorage.setItem('theme', theme);
  }, [theme]);

  // 主题切换函数
  const toggleTheme = () => {
    setTheme(prev => prev === 'light' ? 'dark' : 'light');
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      <div className={`theme-${theme}`}>
        {children}
      </div>
    </ThemeContext.Provider>
  );
}

2. 处理服务端渲染的Hydration匹配问题 #

服务端渲染时window不存在，初始主题是light，但客户端可能从localStorage读到dark，直接渲染会导致Hydration不匹配。需要在客户端挂载后再同步主题：

import { useState, useLayoutEffect, useEffect } from 'react';

function WrapLayout({ children }) {
  // 服务端初始值设为light
  const [theme, setTheme] = useState('light');

  useLayoutEffect(() => {
    // 客户端挂载后读取localStorage并更新主题
    const savedTheme = localStorage.getItem('theme') || 'light';
    if (savedTheme !== theme) {
      setTheme(savedTheme);
    }
  }, []);

  useEffect(() => {
    localStorage.setItem('theme', theme);
  }, [theme]);

  // 主题切换函数不变
  const toggleTheme = () => {
    setTheme(prev => prev === 'light' ? 'dark' : 'light');
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      <div className={`theme-${theme}`}>
        {children}
      </div>
    </ThemeContext.Provider>
  );
}

3. 优化页面渲染模式（可选） #

如果部分页面不需要服务端渲染的i18n数据，可以改用客户端模式的useTranslation，或者对不需要SSR的页面使用getStaticProps，减少服务端渲染触发的频率：

import { useTranslation } from 'next-i18next';

function Home() {
  const { t } = useTranslation('home');
  return <div>{t('welcome')}</div>;
}

export default Home;

这样该页面不会触发服务端渲染，也就不会重置主题状态。

内容的提问来源于stack exchange，提问作者kan