javascript - I18N change language in Next.JS - Stack Overflow

admin管理员组

文章数量:1345007

I have some problems with I18N and NextJS. So I configured my I18N, everything works with default locale, but everything crashes if I want to change locale from local storage.
In _app.js I tried to use this function:

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

I have imported:

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

When app is loaded it crashes and give error:

The above error occurred in the <MyApp> ponent:

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 ponent tree from scratch using the error boundary you provided, ErrorBoundary.

I'm using the newest Next.js and I18N What I found is that the program crashes when code reaches i18n.changeLanguage('en'). If I use the button to set a new locale, the same error happens. I know that next.js have the option to read locale from URL, but I want to use locale from local storage. Is it possible to use I18N in next js that way? I found too that if I console log i18n it gives me back that i18n have changeLanguage function.
Thanks, everyone for responding! I don't know what to do at all :(

Updated: next.config.js:

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

I have some problems with I18N and NextJS. So I configured my I18N, everything works with default locale, but everything crashes if I want to change locale from local storage.
In _app.js I tried to use this function:

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

I have imported:

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

When app is loaded it crashes and give error:

The above error occurred in the <MyApp> ponent:

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 ponent tree from scratch using the error boundary you provided, ErrorBoundary.

I'm using the newest Next.js and I18N What I found is that the program crashes when code reaches i18n.changeLanguage('en'). If I use the button to set a new locale, the same error happens. I know that next.js have the option to read locale from URL, but I want to use locale from local storage. Is it possible to use I18N in next js that way? I found too that if I console log i18n it gives me back that i18n have changeLanguage function.
Thanks, everyone for responding! I don't know what to do at all :(

Updated: next.config.js:

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

• javascript
• reactjs
• internationalization
• next.js
• i18next

Share Improve this question Follow edited Nov 15, 2020 at 19:54 Evald Doda asked Nov 15, 2020 at 18:31 Evald DodaEvald Doda 8311 gold badge22 silver badges66 bronze badges 4

• can you reproduce that with a sandbox? – enoch Commented Nov 15, 2020 at 19:45
• Next.js codesandbox works really bad. If you need more information just say what I need to show you :) – Evald Doda Commented Nov 15, 2020 at 20:01
• ithink that the problem is in useEffect try else for coondition – krimo Commented Nov 15, 2020 at 21:18
• Everything persits even if I do it on button click without if statement – Evald Doda Commented Nov 16, 2020 at 9:55

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You can change the default local in next.config.js

in _app.js you can get the local in router

const router = useRouter();
const { locale } = router;
const { i18n } = useTranslation();

useEffect(() => {
    i18n.changeLanguage(locale);
  }, [locale]);

i suppose that you have two locales(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",
    },
}))

I know this is too late but maybe it helps other people. So for reactjs @enoch solution worked fine but for Nextjs, I had to do the following. Hope this example helps.

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>
  </>);
}

本文标签： javascriptI18N change language in NextJSStack Overflow