国际化

Easy SaaS Next 使用 next-intl 作为国际化库。

配置

在 src/i18n 文件夹中配置国际化。你可以在高亮行中配置支持的语言。

src/i18n/routing.ts

export const routing = defineRouting({
  locales: ['en', 'zh'], // 支持的语言
  defaultLocale: 'zh', // 默认语言
  localePrefix: 'as-needed',
})

针对 Fumadocs 文档框架，我们配置了 src/i18n/fumadocs-ui-translation.ts 文件。来对文档框架的内容进行翻译。

你可以如下面代码一样添加对应语言的翻译

src/i18n/fumadocs-ui-translation.ts

import { Translations } from 'fumadocs-ui/i18n'
import { type Locale } from 'next-intl'

const zh: Partial<Translations> = {
  search: '搜索',
  searchNoResult: '没有找到结果',
  toc: '目录',
  tocNoHeadings: '没有找到目录',
  lastUpdate: '最后更新',
  chooseLanguage: '选择语言',
  nextPage: '下一页',
  previousPage: '上一页',
  chooseTheme: '选择主题',
  editOnGithub: '在 GitHub 上编辑',
}

// 根据 routing.locales 生成文档框架内容的对应翻译
export const fumadocsUiTranslations: Partial<Record<Locale, Partial<Translations>>> = {
  zh,
}

添加对应语言翻译

切换语言的组件会自动根据配置的语言添加对应的切换按钮。你只需要在 locale 文件夹中添加对应语言的翻译文本。

locale/zh.json

{
  "LocaleSwitch": {
    "locale": "{locale, select, zh {中文} en {English} other {Unknown}}", 
    "locale": "{locale, select, zh {中文} en {English} jp {日本語} other {Unknown}}"
  }
}

组件内使用

翻译的文件放在根目录下的 locale 文件夹中。

在组件中使用：

import { useTranslations } from 'next-intl'

const t = useTranslations('HomePage')

return <div>{t('title')}</div>

或者在服务端使用：

import { getTranslations } from 'next-intl/server'

const t = getTranslations('HomePage')

return <div>{t('title')}</div>

强烈推荐搭配 i18n-ally 插件使用。

可以管理翻译文件，并且可以自动补全翻译。或者直接预览翻译。

国际化

配置

添加对应语言翻译

组件内使用

参考链接

目录