FeaturesTranslations

Translation Usage

Learn how to use the translations in your application.

useTranslation hook Trans component Interpolation Best practices

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

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 });
// ...

Check the official i18next documentation for more information about interpolation.

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

Translations

Boost accessibility and reach a wider audience by translating your app into multiple languages.

Language Selector

Allow users to switch between languages.

How is this guide?

Last updated on 1/29/2026