You can support multiple languages in your Wix-managed headless project 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, 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:
The end result is a multilingual site that displays translated content based on the visitor's language preferences.
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:
Install the Wix Multilingual app on your site.
Set up your multilingual dashboard.
Install the @wix/essentials package:
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:
Create a file named translations.json in your src folder.
Add your translation keys and source text as key-value pairs:
You can also add a grouping level to organize related translation keys:
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:
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.
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:
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:
This command connects to the Wix Multilingual backend, downloads translation files for all enabled languages, and stores them in the .wix/multilingual folder.
In your astro.config.mjs file, update the wix object by adding essentials: true and translations: true:
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:
Import i18n from the @wix/essentials package:
Initialize a translation helper function. The getTranslationFunction() method detects the site visitor's selected language and returns the appropriate translation.
In your page component file, get the translated text using a key path from your translations.json file:
Full code example
Site visitors can now view your content in their preferred language.