Internationalization
The client uses i18next with react-i18next for translatable UI strings.
Key files
| File | Role |
|---|---|
src/i18n.js |
i18next initialization |
src/index.js |
Imports ./i18n before render |
public/locales/ |
Translation JSON files (loaded via HTTP backend) |
Configuration
From i18n.js:
- Namespace:
apfront - Default language:
en - Backend:
i18next-http-backend(loads from/locales//.json) - Detector:
i18next-browser-languagedetector
Usage in components
import { useTranslation } from "react-i18next";
function MyComponent() {
const { t } = useTranslation();
return <span>{t("some.key")}</span>;
}
Skeleton wraps the app in Suspense because useTranslation can suspend while loading locale files.
Extracting strings
npm run extract
Runs i18next-parser over src/**/*.{js,jsx} (configured in package.json). Review generated keys in public/locales/ before committing.
Locale support
Currently English is the primary locale. Skeleton hard-codes en for javascript-time-ago; user locale selection is marked TODO in code.