I18n t Function

Overview

The t function, an integral part of the useTranslation hook in internationalization (i18n), plays a crucial role in managing translations within your project. This function dynamically retrieves translated content based on the specified key.

How to Use

Basic Usage

To integrate translation into your React component, leverage the useTranslation hook from 'react-i18next,' providing access to the t function for text translation. Here's a quick example:

import { useTranslation } from 'next-i18next'

function Component() {
  const { t } = useTranslation('apps-journeys-admin') // include a namespace
  return <div>{t('Next Steps')}</div>
}

In this example, the t function wraps the text intended for translation. Ensure to include a namespace, which should be a dashed version of your project path (e.g., apps/journeys becomes apps-journeys).

Translations File Example (/libs/locales/en/apps-journeys-admin.json):

{
  "Next Steps": "Next Steps"
  // other translations...
}

Don't forget to run the nx command extract-translations for the project to gather all strings requiring translations into a namespaced file.

Parameterized Translations

The t function supports parameterized translations, allowing you to include placeholders in your translation strings and replace them dynamically.

import { useTranslation } from 'next-i18next'

function Component() {
  const { t } = useTranslation('apps-journeys-admin') // include a namespace
  const itemValue = 5
  return <div>{t('{{ value }} of an item', { value: itemValue })}</div>
}

Translations File Example (/libs/locales/en/apps-journeys-admin.json):

{
  "{{ value }} of an item": "{{ value }} of an item"
}

What Not to Do

Avoiding Template Literal Misuse

// Incorrect: Avoid using template literals directly in the t function
const incorrectTranslation = t(`js variable here: ${name}`)

Explanation: Embedding JavaScript variables directly using template literals within the t function can lead to unpredictable behavior. Use parameterized translations with appropriate placeholders for a safer and more predictable outcome.

Incorrect Usage of Multiple t Calls Within JSX

// Incorrect: Avoid nesting multiple t calls without proper structure
{t('this is')}<strong>{t('special')}</strong>{t('test')}

Explanation: Nesting multiple t calls within JSX without a clear structure can result in translation inconsistencies. Prefer parameterized translations or the <Trans> component for complex scenarios involving HTML tags.

Trans Component

The Trans component is another tool for handling translations, especially useful for complex scenarios or when incorporating HTML tags into translations.

For simple text translations without React/HTML nodes integration and text formatting, you typically won't need it. In most cases, rely on the traditional t function.

Basic Usage with Parameterized Trans

When using the Trans component in JSX, especially with components like Material-UI Typography, it's advisable to use {'{{ variable }}'} to prevent potential JSX interpretation issues. This ensures correct placeholder interpretation within JSX. Alternatively, you can use the literal string as follows: {{ variable }}.

import { useTranslation, Trans } from 'next-i18next'

function MyComponent() {
  const { t } = useTranslation('app-journeys-admin')
  const count = 4
  return (
    <Trans t={t} count={count}>
      <Typography variant="body2" color="secondary.light">
        Appears on <span style={{ fontWeight: 'bold' }}>{'{{ count }}'}</span> card
      </Typography>
    </Trans>
  )
}

Translations File Example (/libs/locales/en/apps-journeys-admin.json):

{
  "<0>Appears on <2>{{ count }}</2> card</0>_one": "<0>Appears on <2>{{ count }}</2> card</0>"
  // other translations...
}

In this adjusted example, the Trans component is used for a parameterized translation without the t function.

Both the t function and Trans component are powerful tools for handling translations. Understanding their effective use will enhance your ability to create a multilingual and user-friendly application. Refer to the actual documentation of useTranslations and Trans component for a deeper understanding.