Overview

Use loadTranslations to specify how translations are loaded. By default, your app will load translations from the GT CDN in production. You can provide 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 provide built‑in 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 want to define your own translations manually, see the custom translations guide and the loadDictionary function.

Reference

Parameters

Description

Returns

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

Setup

Define loadTranslations as the default export in a file named loadTranslations.js or loadTranslations.ts, either in the src/ directory or at the project root. Ensure the function returns a promise that resolves to an object containing translations for the given locale.

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

If you’d like to use a different name or path, pass the relative path via 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.

npx gtx-cli translate

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 customise how translations are loaded in your app in production.
• Its most common use case is for adding local translations

Next steps

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