Production vs Development

Differences between production and development environments

Overview

gt-next behaves differently depending on the environment your Next.js application is running in.

It determines the environment by checking the NODE_ENV environment variable.

Production Behaviour

Environment variables

In production, gt-next will only read the GT_PROJECT_ID and GT_API_KEY environment variables.

The API key must be a production API key beginning with gtx-api-.

If you use a development API key, gt-next will throw an error.

Translation Loading Behaviour

In production, gt-next will, by default, attempt to load translations from the General Translation CDN.

If you’ve configured custom translation loading behaviour (for example, local translations) via the loadTranslations function, gt-next will use that instead.

Hot reloading of translations is disabled in production.

On‑demand translation for dynamic content using the <Tx> component or tx function is enabled, but only in server components.

Development Behaviour

Environment variables

gt-next accepts the GT_PROJECT_ID and GT_API_KEY environment variables.

The API key can be either a production API key, beginning with gtx-api-, or a development API key, beginning with gtx-dev-.

If a production API key is used in development, gt-next will behave as if you’re in production. This means translation hot reloading will be disabled, and components without translations will render the original content.

Translation Loading Behaviour

In development, gt-next will first attempt to load translations in the same way as in production. These translations are loaded into memory.

When rendering a component (that uses useGT, <T>, or useTranslations) in a language different from the default, gt-next will do the following:

  1. If it detects a valid, stored translation for the given content, it will render the translation.
  2. If no translation is found, it will attempt to translate the content dynamically via the General Translation API.
  3. After translating, the translation will be rendered and stored in memory for future use.
  4. If the translation times out, it will fall back to the original content.

Our API also internally caches development translations for a short period, so if the same translation is requested again, it will be served from cache.

These translations are isolated at the project level, so they will not be mixed up with translations from other projects. Additionally, the cache is unique to development sessions, so cached translations will not be used in production.

gt-next will detect changes to components that use useGT, <T>, or useTranslations and will translate the modified content dynamically via our API.

Production vs Development API Keys

To help distinguish between production and development behaviour in gt-next, we use the concepts of “Production API Keys” and “Development API Keys”.

Production API Keys

Production API keys are API keys beginning with gtx-api-.

When a Production API key is provided, gt-next will behave as described in the Production Behaviour section.

This means that if you are running your Next.js application in development mode and you provide a Production API key, gt-next will behave as if you were in production. Translation hot reloading will be disabled, and components without translations will render the original content.

Other than this behaviour, gt-next will not utilise the Production API key in any way.

The CLI tool reads the GT_API_KEY environment variable and only accepts Production API keys.

The CLI tool will apply billing and rate limiting using the "production" category.

Development API Keys

Development API keys are API keys beginning with gtx-dev-.

When a Development API key is provided, gt-next will behave as described in the Development Behaviour section.

When using a Development API key, billing and rate limiting will be applied under the “development” category.

Translations created with a Development API key will not be stored, and will not be available for use in production.

The purpose of development translations is to allow you to test your application before shipping to production.

How is this guide?

Production vs Development