我正在构建一个有两种语言的网站，因此我将所选语言保留在cookie上，并在_app文件的getInitialProps中检索它，然后将其作为上下文API值传递。我通过useEffect保持cookie与语言状态同步。app.js文件如下所示。
import React, { useState, useEffect } from 'react';
import nextCookie from 'next-cookies';
import * as Cookie from 'js-cookie';
import Head from 'next/head';
import { ThemeProvider } from 'emotion-theming';
import Layout from '../components/Common/Layout';
import GlobalStyle from '../components/GlobalStyle';
import { languageState, languageDispatch } from '../hooks/useLanguage';
function MyApp({ Component, pageProps, initialLanguage = 'ar' }) {
const [language, setLanguage] = useState(initialLanguage);
const changeLanuage = () => {
setLanguage((prev) => (prev == 'en' ? 'ar' : 'en'));
};
useEffect(() => {
Cookie.set('language', language);
}, [language]);
return (
<languageDispatch.Provider value={changeLanuage}>
<languageState.Provider value={language}>
<ThemeProvider theme={theme}>
<Layout>
<Head>
<link rel="shortcut icon" href="/svg/favicon.ico" />
</Head>
<Component {...pageProps} />
<GlobalStyle rtl={rtl} />
</Layout>
</ThemeProvider>
</languageState.Provider>
</languageDispatch.Provider>
);
}
MyApp.getInitialProps = async ({ ctx }) => {
const { language } = cookies(ctx);
return { initialLanguage: language };
};
在开发模式和现在部署的情况下，它可以完美地处理每次页面刷新。然而，当我将其导出为静态并在Netlify上部署时，每次刷新语言都会返回到其初始值("ar"(。
有没有更好的方法来实现它？如果没有，上面的实现有什么问题？
经过一些研究，我发现当使用getInitialProps或getStaticProps静态导出NextJS的项目时，NextJS会创建带有初始值的静态HTML页面-在这种情况下是"ar"-所以每当刷新页面时，内容都会带有其初始值，所以在我以前的方法中，我只是在运行时更改cookie。然而，在构建时，它是初始值"ar"。
这是out/index.html 的代码片段
<script id="__NEXT_DATA__" type="application/json">
{
"props": { "initialLanguage": "ar" },
"page": "/",
"query": {},
"buildId": "RmU4iA8jACDFdZr30Xqjo",
"nextExport": true,
"isFallback": false
}
</script>
所以我知道了一些解决这个问题的方法，即
上传NextJS作为SSR，而不是SSG。
每种语言重复一页，例如"/en"、"/ar"。
将初始值保存在localStorage中并使用效果更改它，但您需要在呈现组件和读取localStorage时处理加载状态。
使用第三方软件包。
因此，我所采用的方法是为每种语言创建两个页面。
所以文件夹结构会变成这样。
pages
--[lang]
--index.js
--other.js
--index.js
这是pages/index.js
import Home from '../components/Home';
import Head from '../components/Common/Head';
import { useRouter } from 'next/router';
import getInitialLocale from '../locale/getInitialLocale';
import Spinner from '../components/Common/Spinner/Spinner';
const Index = () => {
const router = useRouter();
React.useEffect(() => {
const href = `/${getInitialLocale()}`;
router.push({ pathname: href });
}, []);
return (
<div>
<Head title="Home" />
<h1 style={{ fontSize: '3rem' }}>Welcome to Here</h1>
</div>
);
};
export default Index;
如果我做错了什么，或者你有更好的建议，请在这里评论？