# gt-next: General Translation Next.js SDK: loadTranslations
URL: https://generaltranslation.com/zh/docs/next/api/config/load-translations.mdx
---
title: loadTranslations
description: loadTranslations() 函数 API 参考
---

## 概述

使用 `loadTranslations` 指定翻译的加载方式。
默认情况下，你的应用会在生产环境中从 GT CDN 加载翻译。
你可以指定一个 `loadTranslations` 函数，从其他来源加载翻译，例如：

* 从应用的打包产物中加载 (最常见) 
* 从数据库加载
* 从 API 加载
* 从其他 CDN 加载

我们已内置支持从应用打包产物中的本地文件加载翻译。
按照[本指南](/docs/next/guides/local-tx)在你的 Next.js 应用中设置本地翻译。

如果你想手动定义自己的翻译，请参阅[自定义翻译指南](/docs/next/concepts/stand-alone)
以及 [`loadDictionary`](/docs/next/api/config/load-dictionary) 函数。

## 参考文档

### 参数

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

### 说明

| 类型       | 说明            |
| -------- | ------------- |
| `locale` | 要加载翻译内容的区域设置。 |

### 返回值

一个 `Promise<any>`，解析结果为一个字典，其中 `id` 映射到给定区域设置的翻译。

***

## 设置

将 `loadTranslations` 定义为名为 `loadTranslations.js` 或 `loadTranslations.ts` 的文件的默认导出，该文件可放在 `src/` 目录下或项目根目录中。
确保该函数返回一个 Promise，并解析为一个包含给定区域设置翻译内容的对象。

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

如果你想使用其他名称或路径，请在 [`withGTConfig`](/docs/next/api/config/with-gt-config) 中通过 `loadTranslationsPath` 参数传入相对路径。

***


## 示例

### 从打包产物中获取翻译

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

配置为使用[本地翻译](/docs/next/guides/local-tx)时，[`gt translate`](/docs/cli/translate) 命令
会将翻译保存到项目文件树中。

```bash
npx gt translate
```


### 通过 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 {};
  }
};
```


### 从自有数据库加载翻译

```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>
  **问题：** [`loadTranslations`](/docs/next/api/config/load-translations) 和 [`loadDictionary`](/docs/next/api/config/load-dictionary) 有什么区别？

  * [`loadTranslations`](/docs/next/api/config/load-translations) 用于为应用定义获取翻译内容时的自定义加载方式。
    例如，可以从 CDN、数据库或应用的 打包产物 中加载翻译。
    这些翻译通常由机器生成，并由 CLI 工具管理，不太适合用户手动编辑。
  * [`loadDictionary`](/docs/next/api/config/load-dictionary) 适用于将 `gt-next` 作为独立库使用的场景。
    用户自行提供翻译，不依赖任何翻译基础设施。
</Callout>

***


## 注意事项

* `loadTranslations` 可让你自定义应用在生产环境中加载翻译的方式。
* 它最常见的用途是添加[本地翻译](/docs/next/guides/local-tx)

## 下一步

* 了解为何你可能需要使用[本地翻译](/docs/next/guides/local-tx)
* 参考[自定义翻译指南](/docs/next/concepts/stand-alone)添加你自己的翻译