dify/web/i18n/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`
            * all languages text is merge & load in FrontEnd as .js (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 = camalCase(filename)
  * ex: `app/components/datasets/create/embedding-process/index.tsx`
    * `t('datasetSettings.form.retrievalSetting.title')`
- server: i18n/server.ts
  * ns = filename
  * ex: `app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/settings/page.tsx`
    * `translate(locale, 'dataset-settings')`

## TODO

* [ ] ts docs for useGetLanguage
* [ ] ts docs for useI18N
* [ ] client docs for i18n
* [ ] server docs for i18n