🫂Multi Language

Implementing a multilingual website involves creating content in multiple languages and making sure that the appropriate language is displayed to the user based on their language preference.

How to use

Here we use i18n. The installation method is as follows below.

The official i18n documentation

• https://www.i18next.com

• https://react.i18next.com

• https://github.com/i18next/next-i18next/tree/master/examples/simple

Step 1: Install Required Packages

The first step is to install the necessary packages. Run the following command in your terminal:

yarn add next-i18next i18next i18next-browser-languagedetector

This command installs next-i18next, which is a wrapper around i18next, a popular internationalization library. i18next-browser-languagedetector is an add-on package that automatically detects the user's language preference.

Step 2: Create a Configuration File

Next, create a configuration file for next-i18next. In the root directory of your project, create a new file called next-i18next.config.js.

// next-i18next.config.js
module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'es', 'fr'],
  },
};

In this example, we're defining three locales: English, Spanish, and French. The default locale is set to English.

Step 3: Create Language Files

Next, create a folder called public/locales in the root directory of your project. Inside this folder, create a subfolder for each locale you defined in the previous step.

public/locales
├── en
└── id

Inside each locale folder, create a JSON file for each page or component that needs to be translated. For example, if you have a Home page and Contact page, you would create the following files:

public/locales
├── en
│   ├── home.json
│   └── contact.json
└── id
    ├── home.json
    └── contact.json

Here's an example of what the home.json file might look like:

{
  "title": "Welcome to My Website",
  "subtitle": "Learn more about me and what I do",
  "buttonText": "View My Work"
}

Step 4: Set Up the next-i18next Wrapper

In your _app.tsx file, import the next-i18next wrapper and wrap your AppComponent with it.

// _app.tsx
import type { AppProps } from 'next/app';
import { appWithTranslation } from 'next-i18next';

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

export default appWithTranslation(MyApp);

Step 5: Use i18next for Translation

In any component or page that needs to be translated, import the useTranslation hook from next-i18next and use it to translate your text.

// Home.tsx
import { useTranslation } from 'next-i18next';

function Home() {
  const { t } = useTranslation('home');

  return (
    <div>
      <h1>{t('title')}</h1>
      <p>{t('subtitle')}</p>
      <button>{t('buttonText')}</button>
    </div>
  );
}

export default Home;

In this example, we're using the t function returned by useTranslation to translate.

Step 6: Set the Language

Finally, you need to set the language of your app. You can do this by adding a language switcher component to your layout or by automatically detecting the user's preferred language.

Option 1: Language Switcher Component

If you want to let the user switch the language, you can create a component that uses the useTranslation hook to change the language when a user clicks a button or link.

// LanguageSwitcher.tsx
import { useTranslation } from 'next-i18next';

function LanguageSwitcher() {
  const { i18n } = useTranslation();

  function handleChangeLanguage(locale: string) {
    i18n.changeLanguage(locale);
  }

  return (
    <div>
      <button onClick={() => handleChangeLanguage('en')}>English</button>
      <button onClick={() => handleChangeLanguage('es')}>Español</button>
      <button onClick={() => handleChangeLanguage('fr')}>Français</button>
    </div>
  );
}

export default LanguageSwitcher;

Then, you can add this component to your layout:

// Layout.tsx
import LanguageSwitcher from './LanguageSwitcher';

function Layout({ children }) {
  return (
    <div>
      <LanguageSwitcher />
      {children}
    </div>
  );
}

export default Layout;

Option 2: Automatic Language Detection

If you want to automatically detect the user's preferred language, you can use the i18next-browser-languagedetector package that we installed earlier.

// _app.tsx
import type { AppProps } from 'next/app';
import { appWithTranslation } from 'next-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

const options = {
  order: ['cookie', 'navigator'],
  caches: ['cookie'],
};

appWithTranslation(MyApp, {
  i18n: {
    detection: options,
  },
});

This configuration tells i18next to first look for a language cookie, and if there isn't one, to use the language reported by the user's browser.