loadTranslations()

Overview

Use loadTranslations() to specify translation loading behavior. By default, your app will load translations from the GT CDN in production. You can specify a loadTranslations() function to load translations from a different source, such as:

• From your app's bundle (most common)
• From a database
• From an API
• From a different CDN

We have integrated support for loading translations from local files in your app's bundle. Follow this guide to set up local translations in your Next.js app.

If you are looking to manually define your own translations, check out the custom translations guide and the loadDictionary() function.

Reference

Parameters

Description

Returns

A Promise<any> that resolves to dictionary mapping ids to translations for the given locale.

Setup

Define your loadTranslations() as the default export for a file with the name loadTranslations.js or loadTranslations.ts either in the src/ directory or the root. Make sure to have the function return a promise that resolves to an object with translations for the given locale.

export default async function loadTranslations(locale) {
  const translations = await import(`../public/locales/${locale}.json`);
  return translations.default;
};

If you want to use a different name or path, pass the relative path through the loadTranslationsPath parameter in withGTConfig().

Examples

Fetching translations from your bundle

export default async function loadTranslations(locale) {
  const translations = await import(`../public/locales/${locale}.json`);
  return translations.default;
};

When configured to use local translations, the gtx-cli translate command, will save translations in your project's file tree.

You can translation files for your bundle with this command:

npx gtx-cli translate --no-publish --translations-dir ./public/locales

Load translations from a CDN

export default async function loadTranslations(locale) {
  try {
    const translations = await fetch(`https://your-cdn.com/translations/${locale}.json`);
    const data = await translations.json();
    return data;
  } catch (e) {
    console.error(e);
    return {};
  }
};

Load translations from your own database

export default async function loadTranslations(locale) {
  try {
    const translations = await prisma.translation.findUnique({
      where: {
        locale: locale,
      },
    });
    return translations;
  } catch (e) {
    console.error(e);
    return {};
  }
};

Notes

• loadTranslations() gives you the ability to customize how translations are loaded in your app in production.
• Its most common use case is for adding local translations

Next steps

• Learn about why you might want to use local translations
• Add your own translations with the custom translations guide