dify/web/i18n-config/DEV.md

library

• i18next
• react-i18next

hooks

• useTranslation
• useGetLanguage
• useI18N
• useRenderI18nObject

impl

• App Boot
  • app/layout.tsx load i18n and init context
    • use <I18nServer/>
      • read locale with getLocaleOnServer (in node.js)
        • locale from cookie, or browser request header
        • only used in client app init and 2 server code(plugin desc, datasets)
      • use <I18N/>
        • init i18n context
        • setLocaleOnClient
          • changeLanguage (defined in i18n/i18next-config, also init i18n resources (side effects))
            • is i18next.changeLanguage
            • loads JSON namespaces for the target locale and merges resource bundles (see i18n/i18next-config)
• i18n context
  • locale - current locale code (ex eu-US, zh-Hans)
  • i18n - useless
  • setLocaleOnClient - used by App Boot and user change language

load i18n resources

• client: i18n/i18next-config.ts
  • ns = camelCase(filename) (app-debug -> appDebug)
  • keys are flat (dot notation); keySeparator: false
  • ex: app/components/datasets/create/embedding-process/index.tsx
    • const { t } = useTranslation('datasetSettings')
    • t('form.retrievalSetting.title')
• server: i18n/server.ts
  • ns = filename (kebab-case) mapped to camelCase namespace
  • ex: app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/settings/page.tsx
    • const { t } = await getTranslation(locale, 'dataset-settings')
    • t('form.retrievalSetting.title')

TODO

• ts docs for useGetLanguage
• ts docs for useI18N
• client docs for i18n
• server docs for i18n