i18next
Automatically translate your i18next project (<5 min)
Overview
This tutorial will show you how to automatically manage your project's translation files if you are using i18next.
We will follow these 4 steps:
Tip:
Avoid the hassle of using translation files with the <T> component.
Step 1: Add your environment variables
Add your production API key and project ID to your environment variables.
This is necessary to use the gtx-cli tool.
You get these from the General Translation dashboard.
GT_API_KEY=<your-api-key>
GT_PROJECT_ID=<your-project-id>Step 2: Install gtx-cli
Install the gtx-cli tool in your project.
npm i gtx-cliyarn add --dev gtx-clibun add --dev gtx-clipnpm add --save-dev gtx-cliStep 3: Create a gt.config.json file
Create a gt.config.json file in the root of your project.
{
"defaultLocale": "en",
"locales": ["zh", "es", "ja"],
"files": {
"json": {
"include": ["messages/[locale]/*.json"]
},
},
}Feel free to customize the gt.config.json file to your needs. See the configuration docs for more information.
Update the json file format such that the include path matches your project structure.
Translations will preserve the original string syntax.
Step 4: Add the gtx-cli translate command to your build process
Add the gtx-cli translate command to your build or CI process before the build command to automatically add translations to your project.
{
"scripts": {
"translate": "npx gtx-cli translate",
"build": "npm run translate && <your build command>"
}
}This will generate translations for all of your locales and save them to your project. If you want to commit these files to your repo, you can instead run this command before committing.
You're done! Now your project will automatically update all of your translation JSON files any time your project changes.
Notes
- You can automatically add translations to your project with the
gtx-cli translatecommand. - If you want to commit your translation files, you can instead run the
gtx-cli translatecommand before committing. - To configure the output path for your translations, see the configuration docs.
Next steps
- See the usage guide for the cli tool.
How is this guide?