gt-react, gt-next

Automatically translate your gt-next or gt-react project

Overview

This tutorial shows you how to automatically manage your project’s translation files when using gt-next or gt-react.

Note: Use this only when shipping a production build. If you’re using gt-next or gt-react in development, this command isn’t needed.

We’ll follow these four steps:

Add your environment variables

Configure your project with the npx gtx-cli configure command


Step 1: Add your environment variables

Add your production API key and project ID to your environment variables. This is required to use the gtx-cli tool. You can obtain these from the General Translation dashboard.

.env
GT_API_KEY=<your API key>
GT_PROJECT_ID=<your project ID>

Step 2: Configure your project with the npx gtx-cli configure command

Run the gtx-cli configure command to set up your project.

npx gtx-cli configure

Step 3: 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.

package.json
{
  "scripts": {
    "translate": "npx gtx-cli translate",
    "build": "npm run translate && <your build command>"
  }
}

This will generate translations for all your locales and save them to your project. If you want to commit these files to your repo, you can run this command before committing instead.

You’re done! Your project will now automatically update all your translation JSON files whenever your project changes.


Notes

  • You can automatically add translations to your project with the gtx-cli translate command.
  • If you want to commit your translation files, you can instead run the gtx-cli translate command before committing.
  • To configure the output path for your translations, see the configuration docs.

Next steps

How is this guide?

gt-react, gt-next