> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Add Multilingual Support

## Article: Add Multilingual Support

## Article Link: https://dev.wix.com/docs/go-headless/develop-your-project/wix-managed-headless/multilingual-support/add-multilingual-support.md

## Article Content:

# Add Multilingual Support

You can support multiple languages in your [Wix-managed headless project](https://dev.wix.com/docs/go-headless/develop-your-project/wix-managed-headless/about-wix-managed-headless.md) with the `@wix/essentials` package, which uses static content translations. Use the Wix CLI to sync translation keys between your local codebase and the [Multilingual dashboard](https://www.wix.com/my-account/site-selector/?buttonText=Select%20Site&title=Select%20a%20Site&autoSelectOnSingleSite=true&actionUrl=https:%2F%2Fwww.wix.com%2Fdashboard%2F%7B%7BmetaSiteId%7D%7D%2Fwix-multilingual/manage-languages), and use `getTranslationFunction()` from `@wix/essentials` to retrieve translated values in your code. This way, content editors can manage translations without modifying your code.

To add multilingual support to your headless site:

1. Set up the Wix Headless environment.
1. Define your source translations.
1. Push translation keys to the dashboard.
1. Add translations on the dashboard.
1. Pull translations to the site.
1. Use translations in your code.

The end result is a multilingual site that displays translated content based on the visitor's language preferences.

## Step 1 | Set up the Wix Headless environment

This step sets up a Wix Headless site with the necessary apps and packages for multilingual support.

At the end of this step, you have a Wix Headless site with the **Wix Multilingual** app installed and the `@wix/essentials` package ready to use.

To set up the Wix Headless environment:

1. [Create a Wix Headless site](https://dev.wix.com/docs/wix-cli/guides/get-started/quick-start-a-headless-project.md).
1. Install the [Wix Multilingual](https://www.wix.com/app-market/web-solution/wix-multilingual) app on your site.
1. Set up your [multilingual dashboard](https://support.wix.com/en/article/wix-multilingual-managing-your-languages).
1. Install the `@wix/essentials` package:

    ```bash
    npm install @wix/essentials
    ```

## Step 2 | Define your source translations

This step creates a JSON file where you define key-value pairs for your translations. The key is the translation key you use in your code to display translated text. The value is the text in the site's main language.

At the end of this step, you have a `translations.json` file with your translation keys and source text.

To define your source translations:

1. Create a file named `translations.json` in your `src` folder.
2. Add your translation keys and source text as key-value pairs:

    ```json
    {
      "title": "Welcome to My Shop",
      "subtitle": "Quality products for everyone",
      "checkout": "Continue to checkout"
    }
    ```

  You can also add a grouping level to organize related translation keys:

  ```json
  {
    "hero": {
      "title": "Welcome to My Shop",
      "subtitle": "Quality products for everyone"
    },
    "cart": {
      "checkout": "Continue to checkout"
    }
  }
  ```

## Step 3 | Push translation keys to the dashboard

This step uploads your translation keys to the **Multilingual dashboard** so content editors can add translations.

At the end of this step, your translation keys appear on the dashboard ready for translation.

To push translation keys to the dashboard, run the following command:

  ```bash
    npm run wix translation push
  ```

This command uploads the translation keys defined in `src/translations.json`, such as `checkout` or `hero.title`. The keys now appear in the **Multilingual** dashboard, where editors can add languages and input translations.

## Step 4 | Add translations to the dashboard

This step adds translations for each language you want to support in the dashboard.

At the end of this step, your translations are stored on the dashboard and ready to pull into your project.

To add translations on the dashboard:

1. In the dashboard menu, click **Website Content**, then **Multilingual**.
1. Add the languages you want to support.
1. Hover over the language section and click **Edit Translations**.
1. In the **Translation Manager**, click **Headless**.
1. [Add translations](https://support.wix.com/en/article/wix-multilingual-using-the-translation-manager).
1. Click **Save and Publish**.

## Step 5 | Pull translations from the dashboard

This step fetches the translations from the dashboard so you can use them in your app.

At the end of this step, you have JSON files for each language stored locally in your project.

To pull translations, run the following command:

  ```bash
    npm run wix translation pull
  ```

This command connects to the Wix Multilingual backend, downloads translation files for all enabled languages, and stores them in the `.wix/multilingual` folder.

## Step 6 | Modify astro.config.mjs

In your `astro.config.mjs` file, update the `wix` object by adding `essentials: true` and `translations: true`:

```js
wix({
    htmlEmbeds: isBuild,
    auth: true,
    essentials: true,
    translations: true
  })
```

## Step 7 | Use translations in your code

This step shows how to display translated content in your app using the `getTranslationFunction()` method.

At the end of this step, your app displays content in the visitor's preferred language.

To use translations in your code:

1. Import `i18n` from the `@wix/essentials` package:

    ```javascript
    import { i18n } from '@wix/essentials';
    ```

2. Initialize a translation helper function. The `getTranslationFunction()` method detects the site visitor's selected language and returns the appropriate translation.

    ```javascript
    export const useTranslation = () => {
      const t = i18n.getTranslationFunction();
      return { t }
    };
    ```

3. In your page component file, get the translated text using a key path from your `translations.json` file:

    ```javascript
    const heroTitle = t('hero.title');
    ```

**Full code example**

```javascript
import { i18n } from '@wix/essentials';

export const useTranslation = () => {
  const t = i18n.getTranslationFunction();
  return { t }
};

// Get translated text using the key path from the translation.json file
const heroTitle = t('hero.title');
```

Site visitors can now view your content in their preferred language.

## See also

- [About the Multilingual APIs](https://dev.wix.com/docs/api-reference/business-management/multilingual/introduction.md)
- [Wix Multilingual: Using the Translation Manager](https://support.wix.com/en/article/wix-multilingual-using-the-translation-manager)