Translation

Multiple languages feature is an important for your app. To have this enabled the app uses i18next (opens in a new tab).

How it works

At first, i18next library needs a config and initialization file, in this case,src/i18n file.

import i18next from 'i18next'
import { initReactI18next } from 'react-i18next'
 
const resources = {
  en: {
    translation: {
      'Bounce Rate': 'Bounce Rate',
    },
  },
  es: {
    translation: {
      'Bounce Rate': 'Porcentaje',
    },
  },
}
 
i18next.use(initReactI18next).init({
  resources,
  lng: 'en',
  fallbackLng: 'en',
  interpolation: { escapeValue: false },
})

Thereupon, Import initialization file in the app/layout.jsx then i18next added globally in your projects

import 'i18n'
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Then using the translation feature in your whole app via useTranslation hook

import { useTranslation } from 'react-i18next'
 
const Translation = () => {
  const { t } = useTranslation()
  return <h1>{t('Bounce Rate')}</h1>
}

How to remove ?

At first, Remove i18n import file from app/layout.jsx component

import 'i18n' // REMOVE THIS
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

After that, Delete the src/i18n folder from app
At last, Uninstall dependecies i18next and react-i18next

npm uninstall i18next react-i18next

yarn remove i18next react-i18next

Resource

Follow their documentation - Next i18next (opens in a new tab)

Utils Functions