Implementation:Langgenius Dify I18n Context

Knowledge Sources	Langgenius_Dify
Domains	Frontend, Internationalization, Documentation Links
Last Updated	2026-02-12 07:00 GMT

Overview

A collection of React hooks that provide locale-aware utilities for language detection, documentation URL generation, and pricing page localization.

Description

The i18n context module exports a set of hooks that bridge the i18next internationalization library with application-specific locale needs. The useLocale hook extracts the current language from the i18next instance and casts it to the application's Locale type. Derived hooks useGetLanguage and useGetPricingPageLanguage transform the locale into language identifiers appropriate for general display and the pricing page respectively.

The most substantial export is the useDocLink hook, which returns a memoized function for generating locale-aware documentation URLs. It accepts an optional base URL (defaulting to https://docs.dify.ai), and the returned function builds full documentation links by combining the base URL with a language prefix and a documentation path. The hook handles a special case for API reference paths: when the path starts with /api-reference/, it omits the language prefix and instead looks up translated path segments from apiReferencePathTranslations for non-English locales.

The module also exports a DocPathMap type for defining locale-specific path overrides, and a defaultDocBaseUrl constant. All hooks are designed to be lightweight and composable, relying on the underlying i18next and language utility infrastructure.

Usage

Use useLocale() anywhere you need the current locale as a typed value. Use useDocLink() in components that render links to Dify documentation to ensure the URL is localized correctly. The useGetLanguage() and useGetPricingPageLanguage() hooks are useful when constructing locale-dependent external URLs or toggling locale-specific behavior.

Code Reference

Source Location

Repository: Langgenius_Dify
File: web/context/i18n.ts
Lines: 1-52

Signature

export const useLocale: () => Locale

export const useGetLanguage: () => string

export const useGetPricingPageLanguage: () => string

export const defaultDocBaseUrl: string  // 'https://docs.dify.ai'

export type DocPathMap = Partial<Record<Locale, DocPathWithoutLang>>

export const useDocLink: (baseUrl?: string) => (
  path?: DocPathWithoutLang,
  pathMap?: DocPathMap
) => string

Import

import {
  useLocale,
  useGetLanguage,
  useGetPricingPageLanguage,
  useDocLink,
  defaultDocBaseUrl,
} from '@/context/i18n'

I/O Contract

Inputs

Name	Type	Required	Description
baseUrl (useDocLink)	`string`	No	Optional base URL for documentation links; defaults to `https://docs.dify.ai`
path (returned function)	`DocPathWithoutLang`	No	The documentation path without the language prefix
pathMap (returned function)	`DocPathMap`	No	Optional locale-to-path mapping for locale-specific path overrides

Outputs

Name	Type	Description
useLocale	`Locale`	The current i18next locale cast to the application Locale type
useGetLanguage	`string`	The general-purpose language identifier for the current locale
useGetPricingPageLanguage	`string`	The language identifier specific to the pricing page
useDocLink	`(path?, pathMap?) => string`	A memoized function that returns a fully qualified, locale-aware documentation URL

Usage Examples

Generating a Documentation Link

import { useDocLink } from '@/context/i18n'

function HelpLink() {
  const getDocLink = useDocLink()
  const url = getDocLink('/guides/getting-started')

  return <a href={url} target="_blank" rel="noopener">Getting Started Guide</a>
}

Using a Custom Base URL

import { useDocLink } from '@/context/i18n'

function EnterpriseDocLink() {
  const getDocLink = useDocLink('https://enterprise-docs.dify.ai')
  const url = getDocLink('/deployment/kubernetes')

  return <a href={url}>Kubernetes Deployment</a>
}

Using Locale-Specific Path Overrides

import { useDocLink } from '@/context/i18n'
import type { DocPathMap } from '@/context/i18n'

function FeatureDocLink() {
  const getDocLink = useDocLink()
  const pathMap: DocPathMap = {
    'zh-Hans': '/guides/zh-feature-overview',
    'ja-JP': '/guides/ja-feature-overview',
  }
  const url = getDocLink('/guides/feature-overview', pathMap)

  return <a href={url}>Feature Overview</a>
}

Getting the Current Locale

import { useLocale, useGetLanguage } from '@/context/i18n'

function LocaleDisplay() {
  const locale = useLocale()
  const language = useGetLanguage()

  return <span>Current locale: {locale} ({language})</span>
}

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment