FeaturesTranslations
PreviousNext

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>;
}

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

locales/en/translation-file.json
{
  "key": "{{what}} is {{how}}",
  "keyWithDataModel": "I am {{author.name}}"
}
// ...
t('key', { what: 'i18next', how: 'great' });
 
const author = { 
    name: 'Jan',
    github: 'jamuhl'
};
t('keyWithDataModel', { author });
// ...

How use custom tags

locales/en/translation-file.json
{
  "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, }, ] }

How is this guide?

Last updated on 10/17/2025