i18n

Easy SaaS Next uses next-intl as the internationalization library.

Configuration

Configure internationalization in the src/i18n folder. You can configure supported languages in the highlighted line.

export const routing = defineRouting({
  locales: ['en', 'zh'], // supported languages
  defaultLocale: 'zh', // default language
  localePrefix: 'as-needed',
})

For the Fumadocs documentation framework, we have configured the src/i18n/fumadocs-ui-translation.ts file to translate the content of the documentation framework.

You can add translations for corresponding languages as shown in the code below:

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,
}

Adding Language Translations

The language switching component will automatically add corresponding switch buttons based on the configured languages. You only need to add the translation text for the corresponding language in the locale folder.

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

Usage in Components

Translation files are stored in the locale folder in the root directory.

Using in components:

import { useTranslations } from 'next-intl'

const t = useTranslations('HomePage')

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

Or use on the server side:

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

const t = getTranslations('HomePage')

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

It is highly recommended to use with the i18n-ally plugin.

This plugin can manage translation files, provide auto-completion for translations, and preview translations directly.

References

• next-intl
• i18n-ally