Override language routing

[mfteuscher]

I'm using next-translate in my Next.js app. When you change languages, it edits the url to have a /[locale] at the end. Is there a way to disable this? We want all languages to have the exact same url (ie. both en and es homepage are '/'). This is a private website, so SEO is not an issue. Any help?

[aralroca]

All the i18n routing is a feature from Next.js not from this library, documented here: https://nextjs.org/docs/advanced-features/i18n-routing. So in principle, it is not supported.

Maybe you can achieve this by using the I18nProvider on top of your application, where the lang is stored by you and controlled by you.

https://github.com/vinissimus/next-translate#i18nprovider

Something like:

import React, { useContext, createContext } from 'react'
import I18nProvider from 'next-translate/I18nProvider'
import useTranslation from 'next-translate/useTranslation'

const I18nCtx = createContext()

export function I18nWrapper({ children }) {
  const i18n = useTranslation()
  const [lang, changeLang] = useState(i18n.lang)

  return (
    <I18nCtx.Provider value={changeLang}>
      <I18nProvider key={lang} lang={lang}>
        {children}
      </I18nProvider>
    </I18nCtx.Provider>
  )
}

export function useChangeLang() {
  return useContext(I18nCtx)
}

Where you put the I18nWrapper on top of your app, and then to change the lang you can use the useChangeLang hook. Hope it works!

[mfteuscher]

@aralroca so this is what my _app.js file looks like, how would I use the I18nProvider and include the app? Would I just put
<Component {...pageProps} /> where { children } is on your example?

import '../styles/globals.css';
import '../styles/global.scss';
import 'bootstrap/dist/css/bootstrap.min.css';

function MyApp({ Component, pageProps }) {
	return <Component {...pageProps} />;
}

export default MyApp;

[mfteuscher]

Also, how exactly do you use the useChangeLang hook? You import it wherever you want to have the change language button, and then how do you implement it from there?

[aralroca]

function MyApp({ Component, pageProps }) {
	return <I18nWrapper><Component {...pageProps} /></I18nWrapper>;
}

And to use the hook:

function ExampleComponent(){
    const changeLang = useChangeLang()

   return <button onClick={() => changeLang('es')}>Change language to Spanish</button>
}

[VinceBT-BG]

Doing this kills the fast-refresh of Next and remounts the entire app, isn't there a better solution ?

[t09tanaka]

Thank you for the information.

I tried your example.
But it doesn't works for me.

export const I18nWrapper: React.FC<Props> = (props: Props) => {
  const { children } = props;
  const i18n = useTranslation();
  const [lang, changeLang] = useState(i18n.lang);

  return (
    <I18nCtx.Provider value={{ changeLang, lang }}>
      <I18nProvider key={lang} lang={lang}>
        {children}
      </I18nProvider>
    </I18nCtx.Provider>
  );
};

If I change namespaces at the same time, locale will be changed as follows.

import en from '../locales/en/common.json';
import ja from '../locales/ja/common.json';

export const I18nWrapper: React.FC<Props> = (props: Props) => {
  const { children } = props;
  const i18n = useTranslation();
  const [lang, changeLang] = useState(i18n.lang);
  const namespaces: Record<string, I18nDictionary> =
    lang === 'ja' ? { ja } : { en };

  return (
    <I18nCtx.Provider value={{ changeLang, lang }}>
      <I18nProvider key={lang} lang={lang} namespaces={namespaces}>
        {children}
      </I18nProvider>
    </I18nCtx.Provider>
  );
};

Can't we change locale only with lang? Or do I need more settings?

[yoshua0x]

@aralroca I am having issues getting this to work as expected as well. Providing a detailed example below, excluding the _app.tsx configuration. My use case is using English as the default language and I am trying to get the page to refresh with Spanish translations once a button is pressed. Please take a look below.

Wrapper implementation

import React, { useContext, createContext, useState } from "react";
import I18nProvider from "next-translate/I18nProvider";

type i18Context = {
  lang?: string;
  changeLang?: (lang: string) => void;
};

const I18nCtx = createContext<i18Context>({});

export function I18nWrapper({ children }) {
  const [lang, changeLang] = useState("en");

  const handleChangeLang = (newLang: string) => {
    console.log("Lang change: ", newLang);
    changeLang(newLang);
  };

  const contextValues = { lang, changeLang: handleChangeLang };

  return (
    <I18nCtx.Provider value={contextValues}>
      <I18nProvider key={lang} lang={lang}>
        {children}
      </I18nProvider>
    </I18nCtx.Provider>
  );
}

export function useChangeLang() {
  return useContext(I18nCtx);
}

Wrapper usage

useEffect(() => {
    changeLang("es");
  }, [changeLang]);

 <button onClick={() => changeLang("es")}>Change language to Spanish</button>

When the button is pressed, it properly updates the state of the I18nProvider component, however, the content is not getting re-rendered in the language configured.

Any additional pointers on this is greatly appreciated.

[BartoGabriel]

I can't get it to work.

I'd like to be able to handle it outside of next's routes.

There are many applications that handle translations with other methods outside of the URL (obviously losing SEO):

• Gmail
• Youtube
• Twitter
• Spotify Web
  And the list can be very long....

[mattvb91]

@BartoGabriel did you manage to solve it? I am trying to do the same thing

[BartoGabriel]

No, I couldn't. We ended up solving it on the client side with another library.
Next only works by URL. I think it's because it's meant to have as much HTML compiled for each request. I couldn't find much help for this kind of thing.

It would be good if next is not based only on URLs, but if it has some header (like a cookie for example) where it obtains the language and can compile on the server side based on that header and not only depend on the URL.

[mattvb91]

I ended up solving it my side by completely removing this lib and just passing in my locale in my top level _app getInitial props and wrapping my app with a context that then solves the imported json files based on the props I pass in. For anyone else looking to get translations working on server level id recommend just going that route instead of trying to squeeze it in with this

[mikey-mo]

Was able to achieve this by disabling webpack loading in the i18n config file. I used a context wrapper similar to the one suggested above and attached a hook to listen for changes in language selection in order to set a cookie.

[joaopedrodcf]

Is there a way to make this work with app router ?

I noticed we have AppDirI18nProvider which is the context we use when we use app router.

As the main post I would also like to do translations that don't change the url.

[aralroca]

You can use AppDirI18nProvider but is a little bit tricky, because you need to load first the namespace and pass it to AppDirI18nProvider. This provider is not in the docs because currently is for internal use of the plugin. But maybe we can improve and add to the docs

[ethanke]

For App Routing, folder should be name as (app)/[lang]/pages.tsx and not [locales]

[LarsEjaas]

I have an app that may/may not be localized depending on settings from the CMS (all routing is handled from the CMS).
So I need the path for the default language to be always domain/path and then for any additional languages domain/[locale]/path

I am unsure how to handle this. The recommended approach where you nest all routes inside a [lang] slug won't work, as I will have both layout(s), pages, not-found, errors, etc. in routes without a lang param.

I am trying to avoid a query parameter, so a simple cookie set from middleware would be a reasonably simple solution I guess. However, I am unsure how globalThis.__NEXT_TRANSLATE__ is populated serverside in server components?
Is it correctly understood that this is done using WebPack loader through the next-translate-plugin?

Is it correctly understood that <AppDirI18nProvider> is the context provider used clientside or is it done differently in the app-router?