Блог

У меня есть некоторые проблемы с 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, но я хочу использовать локаль из локального хранилища. Возможно ли таким образом использовать I18N в следующем js? Я также обнаружил, что если я консольный журнал 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
    }
}))
  

Вы можете изменить локальный по умолчанию в 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",
    },
}))