# Internationalization (/docs/internationalization)





## Setup [#setup]

To configure internationalization, define an i18n config:

```tsx title="press.config.tsx"
import { defineConfig } from "fumapress";
import { defineDocs } from "fumadocs-mdx/macro";
import { defineI18n } from "fumadocs-core/i18n";
import { uiTranslations } from "fumadocs-ui/i18n";
import { fumapressTranslations } from "fumapress/i18n";

const docs = defineDocs({
  dir: "content/docs",
  docs: { async: true },
});

// [!code ++:4]
const i18n = defineI18n({
  languages: ["cn", "en"],
  defaultLanguage: "en",
});

// [!code ++]
const translations = i18n
  // [!code ++:3]
  .translations()
  .extend(uiTranslations())
  .extend(fumapressTranslations());

export default defineConfig({
  content: docs.toFumadocsSource(),
  // [!code ++]
  translations,
});
```

You can add translations to UI like:

```tsx
const translations = i18n
  .translations()
  .extend(uiTranslations())
  .extend(fumapressTranslations())
  // [!code ++:10]
  .add({
    en: { displayName: "English" },
    cn: {
      displayName: "Chinese",
      "Search(search dialog)": "搜尋文檔",
      "Blog(blog)": "博客",
      "All Tags(blog tags page)": "全部标签",
    },
  });
```

If you have other integrations and want to add translations for them, include them via `extend()` like:

```tsx
import { openapiTranslations } from "fumadocs-openapi/i18n";
import { aiTranslations } from "@fumapress/ai/i18n";
import { feedbackTranslations } from "@fumapress/feedback/i18n";

const translations = i18n
  .translations()
  .extend(uiTranslations())
  .extend(fumapressTranslations())
  // [!code ++:3]
  .extend(openapiTranslations())
  .extend(feedbackTranslations())
  .extend(aiTranslations());
```

### Using Language Packs [#using-language-packs]

The official language pack extends `@fumadocs/language` and adds translations for Fumapress.

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm i @fumapress/language
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm add @fumapress/language
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn add @fumapress/language
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun add @fumapress/language
    ```
  </CodeBlockTab>
</CodeBlockTabs>

```tsx title="press.config.tsx"
import { zhCN } from "@fumapress/language/zh-cn";

const translations = i18n
  .translations()
  // add Simplified Chinese translations to `cn` locale [!code ++]
  .preset("cn", zhCN());
```

Available presets:

* `zhCN`
* `zhTW`

When using a language pack, you do not need to include integrations with `extend()` unless you want to override the default translations.

<Callout title="Learn More">
  See [Fumadocs Translations API](https://fumadocs.dev/docs/ui/translations) for adding
  translations.
</Callout>

### Writing Content [#writing-content]

Add Markdown/JSON files for different languages by appending `.{locale}` to your file name, like:

<Files>
  <Folder name="content">
    <File name="meta.json" />

    <File name="meta.cn.json" />

    <File name="get-started.mdx" />

    <File name="get-started.cn.mdx" />
  </Folder>
</Files>