On this page
Localization
Root.js has a built-in way of handling localization, which includes locale-aware routes and a translations system that loads JSON files within the translations/ folder.
Configuration
Localization settings can be configured within root.config.ts using the i18n key, e.g.:
ts
// @/root.config.ts
import {defineConfig} from '@blinkk/root';
export default defineConfig({
i18n: {
urlFormat: '/[locale]/[path]',
locales: ['en', 'ja'],
defaultLocale: 'en',
},
});Translations
Translations are stored as key-value pairs in JSON files within the translations/ folder.
json
// @/translations/fr.json
{
"Hello, world!": "Bonjour le monde!",
"Hello, {name}!": "Bonjour {name}!"
}useTranslations()
The useTranslations() hook can be used within a route, which returns a function that returns the translation for a given key.
tsx
// @/routes/index.tsx
import {useTranslations} from '@blinkk/root';
export default function Page(props) {
const t = useTranslations();
if (props.name) {
return <h1>{t('Hello, {name}!', {name: props.name})}</h1>;
}
return <h1>{t('Hello, world!')}</h1>;
}