Translation Usage
Learn how to use the translations in your application.
useTranslation hook
As mentioned in the react i18next documentation,
the preferred way to translate a string is to use the useTranslation
hook from react-i18next.
'use client';
import { useTranslation } from 'react-i18next';
export function MyComponent() {
const { t, i18n: {language: locale} } = useTranslation('common');
// the locale var contains the active language code
return <Button aria-label={{t('homeTabLabel')}}>
<Trans i18nKey="auth.signUpTitle" ns="dashboard" >
</Button>;
}
Even if useTranslation
is a hook and can be used in client side only, translations are server side compatible.
By default translations are loaded client side, you won't see any translations until the page is loaded.
But we solved that issue by loading translations server side.
Server-side translations
When you need translations server side, you can use the getServerI18n
function set in the ~/lib/i18n.server.ts
file (see previous page).
import { getServerI18n } from '~/lib/i18n.server'; export async function generateMetadata() { const { t, language } = await getServerI18n(); return { title: t('marketing:contact'), }; } export function ContactPage() { const { t } = await getServerI18n(); return <h1>{t('marketing:homeTabLabel')}</h1>; }
How to use data in translations
{
"key": "{{what}} is {{how}}",
"keyWithDataModel": "I am {{author.name}}"
}
// ...
t('key', { what: 'i18next', how: 'great' });
const author = {
name: 'Jan',
github: 'jamuhl'
};
t('keyWithDataModel', { author });
// ...
Check the official i18next documentation for more information about interpolation.
How use custom tags
{
"key": "This is my <span>emphasized text</span> here",
}
// ...
t.rich('key', {
span: (chunks) => <span className="font-semibold">{chunks}</span>,
})
// ...
Constant translation
When you need to use a translation in a constant, transform it to a function that accepts the translation function.
Before:
const ITEMS = [
{
name: 'Home',
icon: HomeIcon,
},
{
name: 'Settings',
icon: SettingsIcon,
},
{
name: 'Profile',
icon: UserIcon,
},
]
After:
const getItems = (t: ReturnType<typeof useTranslation<'homepage'>>['t']) => { return [ { name: t('navigation.home'), icon: HomeIcon, }, { name: t('navigation.settings'), icon: SettingsIcon, }, { name: t('navigation.profile'), icon: UserIcon, }, ] }
Boost accessibility and reach a wider audience by translating your app into multiple languages.
Allow users to switch between languages.
How is this guide?
Last updated on 10/17/2025