# gt-next: General Translation Next.js SDK: loadTranslations
URL: https://generaltranslation.com/en-GB/docs/next/api/config/load-translations.mdx
---
title: loadTranslations
description: API reference for the loadTranslations() function
---

## Overview

Use `loadTranslations` to specify translation loading behaviour.
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 provide built-in support for loading translations from local files in your app's bundle.
Follow [this guide](/docs/next/guides/local-tx) to set up local translations in your Next.js app.

If you want to define your own translations manually, see the [custom translations guide](/docs/next/concepts/stand-alone)
and the [`loadDictionary`](/docs/next/api/config/load-dictionary) function.

## Reference

### Parameters

<TypeTable
  type={{
  "locale": {
      type: 'string',
      optional: false,
  },
}}
/>

### Description

| Type     | Description                                         |
| -------- | --------------------------------------------------- |
| `locale` | The locale for which translations should be loaded. |

### Returns

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

***

## Setup

Define your `loadTranslations` as the default export for a file named `loadTranslations.js` or `loadTranslations.ts`, either in the `src/` directory or the root.
Make sure the function returns a promise that resolves to an object with translations for the given locale.

```js title="src/loadTranslations.js"
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 using the `loadTranslationsPath` parameter in [`withGTConfig`](/docs/next/api/config/with-gt-config).

***


## Examples

### Fetching translations from your bundle

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

When configured to use [local translations](/docs/next/guides/local-tx), the [`gt translate`](/docs/cli/translate) command
will save translations in your project&#39;s file tree.

```bash
npx gt translate
```


### Load translations from a CDN

```js title="loadTranslations.js"
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

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

<Callout>
  **Question:** What&#39;s the difference between [`loadTranslations`](/docs/next/api/config/load-translations) and [`loadDictionary`](/docs/next/api/config/load-dictionary)?

  * [`loadTranslations`](/docs/next/api/config/load-translations) is used to define custom loading behaviour for your app&#39;s translations.
    This could mean fetching translations from a CDN, a database, or your app&#39;s bundle.
    These are usually machine-generated translations, managed by the CLI tool, and not especially user-friendly to edit.
  * [`loadDictionary`](/docs/next/api/config/load-dictionary) is intended for implementations of `gt-next` as a standalone library.
    Users provide their own translations, and no translation infrastructure is used.
</Callout>

***


## Notes

* `loadTranslations` lets you customise how translations are loaded in your app in production.
* Its most common use case is adding [local translations](/docs/next/guides/local-tx)

## Next steps

* Learn why you might want to use [local translations](/docs/next/guides/local-tx)
* Add your own translations with the [custom translations guide](/docs/next/concepts/stand-alone)