how to remove the /[lang tag] from url using nextjs?

Question

I want to remove the /en or the /it from the url. I don't want it to be explicit putting that in the url. i18next does it by default and I don't know how to remove it. I just want to make it in background.

Do I have to add any option to remove that or there's nothing I can do about?

My code is the following:

import i18n from 'i18next'
import Backend from 'i18next-http-backend'
import LanguageDetector from 'i18next-browser-languagedetector'
import { initReactI18next } from 'react-i18next'

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    debug: true,

    interpolation: {
      escapeValue: false,
    },
    react: {
      useSuspense: false,
    },
  })

export default i18n

I import this in the page I want to translate

import { useTranslation } from 'react-i18next';

function MyComponent: ReactElement {
    const [isEnglish, setIsEnglish] = useState(true);
    const { t, i18n } = useTranslation();
    const handleClick = () => {
        setIsEnglish(!isEnglish);
        i18n.changeLanguage(!isEnglish ? 'en' : 'it');
    }
    return <>My stuff</>
 }

As I said it adds to my route /[language code]. Is there a way to remove it and just set it up in "background"?

Thank you very much!

Why do you use `use(Backend)`? I think that's the problem. You'd want to look at something like https://github.com/isaachinman/next-i18next, in order to correctly setup internationalization with server-side locale detection. — Eric Burel, Apr 07 '21 at 09:06

Omar Dieh · Answer 1 · 2022-06-06T20:51:06.437

This solved my problem, hope it solves yours.

Use next useRouter to get the current active language:

import { useRouter } from  "next/router";
const router = useRouter();
const active_language = router.locale;

Use window object to get the current full URL of your app:

const window_url = window.location.href;

Note: Next.js executes code first server-side, then client-side (which includes the window object). there are many ways to achieve this, if you get "Window is not defined" read this article.

Set your API URL based on the current active language,

assuming your default language is "en" :

let api_url = "";
if(active_language === "en") {
    api_url = `${window_url.substr(0, window_url.lastIndexOf("/"))}/`;
    console.log(window_url) // http://localhost:3000/shop
    console.log(api_url) // http://localhost:3000/
};

and your secondary language is "ar":

if(active_language === "ar") {
    api_url = window_url.substr(0, window_url.lastIndexOf("/") - 2);
    console.log(window_url) // http://localhost:3000/ar/shop
    console.log(api_url) // http://localhost:3000/
};

Now your API URL is set to the same URL even if you switch the locale language:

fetch(`${api_url}/api/hello`);

score 0 · Accepted Answer · answered Jun 16 '21 at 08:16

0

In your next.config.js.

i18n: {
  localeDetection: false,
}

this solves a problem for me.

answered Jun 16 '21 at 08:16

DedaDev

4,441
2
21
28

2

If I do that it raises this error: > Specified i18n.locales should be an Array received undefined. See more info here: https://nextjs.org/docs/messages/invalid-i18n-config . If I add the "locales" array (also empty) it raises an error because "defaultLocale" is empty. In the end I have to set a defaulktLocale and router.locale returns that one! – Alex 75 Jan 25 '22 at 22:55

how to remove the /[lang tag] from url using nextjs?

2 Answers2