i18n
Internationalization guide using react-i18next. Use when adding translations, creating i18n keys, or working with localized text in React components (.tsx files). Triggers on translation tasks, locale management, or i18n implementation.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Internationalization guide using react-i18next. Use when adding translations, creating i18n keys, or working with localized text in React components (.tsx files). Triggers on translation tasks, locale management, or i18n implementation.
How to use
Dodaj nowe klucze tłumaczeń do pliku w katalogu src/locales/default/ — nigdy nie edytuj bezpośrednio plików JSON w folderze locales/. Stosuj konwencję płaskich kluczy z notacją kropkową, na przykład 'alert.cloud.action' zamiast zagnieżdżonych obiektów.
Eksportuj nową przestrzeń nazw w pliku src/locales/default/index.ts, aby udostępnić ją w aplikacji.
Dla podglądu podczas pracy nad kodem ręcznie przetłumacz klucze w plikach locales/zh-CN/{namespace}.json i locales/en-US/{namespace}.json — to pozwoli ci testować bez uruchamiania pełnego procesu generowania.
Uruchom polecenie pnpm i18n, aby wygenerować tłumaczenia dla wszystkich języków. W środowisku CI proces ten uruchamia się automatycznie.
W komponentach React zaimportuj hook useTranslation z react-i18next i pobierz funkcję t, na przykład const { t } = useTranslation('common'). Następnie używaj kluczy do wyświetlania tłumaczeń, np. t('newFeature.title') lub t('alert.cloud.desc', { credit: '1000' }) dla kluczy z parametrami.
Jeśli potrzebujesz tekstu z wielu przestrzeni nazw, przekaż je jako tablicę do useTranslation, a następnie odwołuj się do nich z prefiksem, na przykład useTranslation(['common', 'chat']) i t('common:save').