I18N在Next中更改语言.JS

Question

I18N和NextJS有一些问题。所以我配置了I18N，一切都使用默认的区域设置，但如果我想从本地存储更改区域设置，一切都会崩溃
在_app.js中，我尝试使用这个函数：

const { i18n } = useTranslation();
useEffect(() => {
if(localStorage.getItem('Locale')) {
i18n.changeLanguage(localStorage.getItem('Locale'))
}
}, [])

我已导入：

import './I18N/i18next';
import { useTranslation } from 'react-i18next'

当应用程序加载时，它崩溃并给出错误：

The above error occurred in the <MyApp> component:
at MyApp (webpack-internal:///./pages/_app.js:35:24)
at ErrorBoundary (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ErrorBoundary.js:23:47)
at ReactDevOverlay (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ReactDevOverlay.js:73:23)
at Container (webpack-internal:///./node_modules/next/dist/client/index.js:146:5)
at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:623:24)
at Root (webpack-internal:///./node_modules/next/dist/client/index.js:739:25)
React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

我正在使用最新的Next.js和I18N我发现，当代码达到i18n.changeLanguage('en'(时，程序会崩溃。如果我使用按钮设置新的区域设置，也会发生同样的错误。我知道next.js可以从URL中读取区域设置，但我想使用本地存储中的区域设置。有可能在下一个js中以这种方式使用I18N吗？我还发现，如果我控制台日志i18n，它会告诉我i18n有changeLanguage函数
谢谢大家的回复！我根本不知道该怎么办：(

更新时间：next.config.js:

const withLess = require('@zeit/next-less');
const withSass = require('@zeit/next-sass');
module.exports = withSass(withLess({
lessLoaderOptions: {
javascriptEnabled: true
}
}))

Answer 1

您可以更改next.config.js中的默认本地

在_app.js中，您可以在路由器中获得本地

const router = useRouter();
const { locale } = router;
const { i18n } = useTranslation();
useEffect(() => {
i18n.changeLanguage(locale);
}, [locale]);

我想你有两个地区(fr，en(

next.config.js

const withLess = require('@zeit/next-less');
const withSass = require('@zeit/next-sass');
module.exports = withSass(withLess({
lessLoaderOptions: {
javascriptEnabled: true
},
i18n: {
locales: ["fr", "en"],
defaultLocale: "fr",
},
}))