# Multi Language

## How to use

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

{% hint style="info" %}
The official i18n documentation

* [https://www.i18next.com](https://www.i18next.com/)
* [https://react.i18next.com](https://react.i18next.com/)
* <https://github.com/i18next/next-i18next/tree/master/examples/simple>
  {% endhint %}

### Step 1: Install Required Packages

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

```bash
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`.

```typescript
// 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:

```json
{
  "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.

```tsx
// _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.

```tsx
// 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.

```tsx
// 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:

```tsx
// 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.

```tsx
// _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.