Implementation:Langgenius Dify I18n Client
| Knowledge Sources | |
|---|---|
| Domains | Frontend, Internationalization |
| Last Updated | 2026-02-12 07:00 GMT |
Overview
Client-side i18next instance factory and language switching utility for React components in the Dify frontend.
Description
This module provides the client-side internationalization setup for the Dify web application. It exports two key functions: createI18nextInstance and changeLanguage. The createI18nextInstance function creates a new i18next instance configured with the react-i18next integration and a resource-to-backend loader that dynamically imports JSON translation files from the i18n/{locale}/{namespace}.json directory structure. Namespace names are converted from camelCase to kebab-case using the es-toolkit library before resolving the JSON file path. The changeLanguage function retrieves the current i18next instance via getI18n from react-i18next and asynchronously switches the active language. This file is marked with the 'use client' directive, indicating it runs exclusively in the browser context within Next.js.
Usage
Use createI18nextInstance when initializing i18next on the client side, typically within a React client component or provider that needs to hydrate translations received from the server. Use changeLanguage when the user selects a different language from the UI, such as a locale picker dropdown.
Code Reference
Source Location
- Repository: Langgenius_Dify
- File: web/i18n-config/client.ts
- Lines: 1-35
Signature
export function createI18nextInstance(lng: Locale, resources: Resource): i18n
export const changeLanguage: (lng?: Locale) => Promise<void>
Import
import { createI18nextInstance, changeLanguage } from '@/i18n-config/client'
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| lng | Locale |
Yes | The locale code to initialize the i18next instance with (e.g., 'en-US', 'zh-Hans').
|
| resources | Resource (from i18next) |
Yes | Pre-loaded translation resources to bundle into the instance, keyed by locale and namespace. |
Outputs
| Name | Type | Description |
|---|---|---|
| instance | i18n (i18next instance) |
A fully initialized i18next instance configured with react-i18next and a dynamic backend loader. |
| (changeLanguage) | Promise<void> |
Resolves once the language has been switched on the global i18next instance. |
Usage Examples
Creating a Client-Side i18next Instance
import { createI18nextInstance } from '@/i18n-config/client'
import type { Locale } from '@/i18n-config/language'
import type { Resource } from 'i18next'
// resources typically come from the server via props
const locale: Locale = 'en-US'
const resources: Resource = {
'en-US': {
common: { welcome: 'Welcome to Dify!' },
},
}
const i18nextInstance = createI18nextInstance(locale, resources)
Switching Language at Runtime
import { changeLanguage } from '@/i18n-config/client'
// Called when a user selects a new locale
await changeLanguage('ja-JP')