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 detects the environment by checking the NODE_ENV environment variable.
Production Behavior
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 are using a Development API Key, gt-next will throw an error.
Translation Loading Behavior
In production, gt-next will attempt to load translations from the General Translation CDN, by default.
If you have configured custom translation loading behavior, such as local translations, via the loadTranslations function, gt-next will use that instead.
Translation hot reloading is disabled since it is in production.
On-demand translation for dynamic content using the <Tx> component or tx() function is enabled, but only in server components.
Development Behavior
Environment Variables
gt-next will accept the GT_PROJECT_ID and GT_API_KEY environment variables.
The API key can either be a Production API Key, beginning with gtx-api-, or a Development API Key, beginning with gtx-dev-.
If a production API key is provided in development, gt-next will behave as if you are in production.
This means that translation hot reloading will be disabled, and components without translations will render the original content.
Translation Loading Behavior
In development, gt-next will first attempt to load translations in the same way as production.
These translations are loaded into memory.
When rendering a component (that uses useGT(), <T>, or useDict()) in a language different than the default, gt-next will do the following:
- If it detects a valid, stored translation for the given content, it will render the translation.
- If no translation is found, it will attempt to dynamically translate the content via the General Translation API.
- After translating, the translation will be rendered, and stored in memory for future use.
- If the translation times out, it will fallback and render the original content.
Our API also internally caches development translations for a short period of time, 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 useDict() and will dynamically translate the modified content via our API.
Production vs Development API Keys
To help distinguish between the production and development behavior of gt-next, we have the concept 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 Behavior 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 are in production.
Translation hot reloading will be disabled, and components without translations will render the original content.
Other than this behavior, gt-next will not utilize 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 Behavior section.
When using a Development API key, billing and rate-limiting will be applied using 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?