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",
    },
}))

Answer 2

我知道这已经太晚了，但也许它对其他人有帮助。因此，对于reactjs @enoch 解决方案工作正常，但对于Nextjs，我必须执行以下操作。希望这个例子有帮助。

import { useTranslation } from "next-i18next";
import { useRouter } from "next/router";

export default function LanguagePopover() {
  const router = useRouter();
  const { pathname, asPath, query, locale } = router;
  const { t, i18n } = useTranslation();
  
  const handleLanguageChange = (langValue: string) => {
    router.push({ pathname, query }, asPath, { locale: langValue });
  };
  return (<>
        <label>Choose Language:</label>

      <select
        value={locale}
        onChange={(e) => handleLanguageChange(e.target.value)}
      >
        <option value="en">{t("english")}</option>
        <option value="fr">{t("french")}</option>
      </select>
  </>);
}