Nextjs 13 Hydration не удалось выполнить, поскольку исходный пользовательский интерфейс не соответствует тому, что было ⇐ Javascript

[Гость]

Я использую следующую версию 13.1.0. У меня есть ContextProvider, который устанавливает светлую и темную тему

'использовать клиент'; импортировать { Theme, ThemeContext } из @store/theme; импорт {ReactNode, useState, useEffect} из «реагировать»; интерфейс ContextProviderProps { дети: ReactNode } const ContextProvider = ({ Children }: ContextProviderProps) => { const [theme, setTheme] = useState('темный'); useEffect(() => { const storeTheme = localStorage.getItem('тема'); if (storedTheme === 'светлый' || StoredTheme === 'темный') { setTheme (хранимая тема); } еще { localStorage.setItem('тема', тема); } // добавлено в тело из-за поведения чрезмерной прокрутки document.body.classList.add(тема); возврат () => { document.body.classList.remove(тема); }; }, [тема]); константный переключатель = () => { const newTheme = тема === 'свет'? 'темный свет'; setTheme (новая тема); localStorage.setItem('тема', новая тема); }; возвращаться ( {дети} ); }; экспорт {ContextProvider}; Я использую его в корневом макете

import '@styles/globals.scss'; импортировать { GlobalContent } из '@comComponents/GlobalContent/GlobalContent'; импортировать { ContextProvider } из '@comComponents/ContextProvider/ContextProvider'; импортировать { Inter } из '@next/font/google'; импортировать {ReactNode} из «реагировать»; const inter = Inter({subsets: ['latin'] }); интерфейс RootLayoutProps { дети: ReactNode } const RootLayout = ({ Children }: RootLayoutProps) => { возвращаться ( {дети} ); }; экспортировать RootLayout по умолчанию; И я использую значение темы в своем GlobalContent

'использовать клиент'; импортировать стили из @comComponents/GlobalContent/GlobalContent.module.scss; импортировать { GlobalHeader } из '@comComponents/GlobalHeader/GlobalHeader'; импортировать { GlobalFooter } из '@comComponents/GlobalFooter/GlobalFooter'; импортировать { ThemeContext } из @store/theme; импортировать {ReactNode, useContext} из «реагировать»; интерфейс GlobalContentProps { дети: ReactNode } const GlobalContent = ({ Children }: GlobalContentProps) => { const {тема} = useContext (ThemeContext); возвращаться ( {дети} ); }; экспорт {GlobalContent}; Я получаю сообщение об ошибке

Не удалось выполнить гидратацию, поскольку исходный пользовательский интерфейс не соответствует тому, что было отображено на сервере.



Ссылка на ошибку в документации React

Я не понимаю, почему я получаю эту ошибку, поскольку я обращаюсь к localStorage внутри моего useEffect, поэтому я ожидаю, что HTML, сгенерированный на сервере, будет таким же с клиентом перед первым рендерингом.

Как устранить эту ошибку?