Skip to main content

Overview

i18next is an internationalization (i18n) framework for JavaScript that helps manage translations in web applications.It supports features like language detection, translation management, and it is compatible with various JavaScript libraries, including React, Angular, and Vue. In this documentation, we will cover how to use i18next in your web application.

Using Translations in your Server Components​

Use the Trans component to translate text in your Next.js application. This utility component simplifies the localization process.

import Trans from '@core/utils/i18n/Trans'

const ComponentPage = () => {
  return (
    <div>
      <Trans i18nKey='namespace:hello' />
    </div>
  )
}

export default ComponentPage

Using the useTranslation Hook​

Use the useTranslation hook to access the t function. This hook simplifies the process of translating text in your application.

import { useTranslation } from 'react-i18next'

const ComponentPage = () => {
  const { t } = useTranslation()

  return <div>{t('namespace:hello')}</div>
}

export default ComponentPage

Conclusion​

In this documentation, we have covered how to use i18next in your Next.js application. You can now create and manage translations for multiple languages in your application.