Namespaces

Les namespaces sont une façon d'organiser les fichiers de traductions, ce qui nous permet de les séparer par fonctionnalité ou par type de contenu.

Par défaut, nous avons un namespace appelé translation pour toutes nos traductions, qui se trouve dans le fichier src/locales/es/translation.json.

src/locales/es/translation.json

{
  "Hola Este es un ejemplo de traduccion base": "Hola Este es un ejemplo de traduccion base"
}

• Si nous voulons séparer nos traductions par fonctionnalité, nous pouvons créer un nouveau namespace appelé messages.

  src/locales/es/messages.json

  {
    "Mensaje de ejemplo": "Mensaje de ejemplo"
  }

• Si nous voulons séparer nos traductions par type de contenu, nous pouvons créer un nouveau namespace appelé pages.

  src/locales/es/pages.json

  {
    "Texto en la pagina": "Texto en la pagina"
  }

Configuration dans notre hook

Dans notre hook de traductions, nous passons le paramètre namespace pour pouvoir utiliser celui que nous voulons, mais par défaut, nous passons translation.

src/hooks/useTranslation.tsx

"use client";
import { useTypedTranslation } from 'translate-projects-nextjs/hooks';
import es from '@/locales/es/translation.json';

type Tylelang = typeof es

export const useTranslation = (ns: string = 'translation') => {
    return useTypedTranslation<Tylelang>(ns)
}

Utilisation des espaces de noms

Nous pouvons utiliser les namespaces dans notre composant.

Dans ce cas, nous allons utiliser le namespace messages.

src/App.tsx

import { useTranslation } from '@/hooks/useTranslation'; Nous importons notre hook.

function App() {
  const { t } = useTranslation('messages'); //Nous utilisons l'espace de noms
  return (
    <div>
      <header>
        {t('Mensaje de ejemplo')}
      </header>
    </div>
  );
}

export default App;

Une autre façon d'utiliser le namespace est de le passer comme paramètre dans la fonction useTranslation.

src/App.tsx

import { useTranslation } from '@/hooks/useTranslation'; Nous importons notre hook.

function App() {
  const { t } = useTranslation(); //Nous ne passons pas l'espace de noms.
  return (
    <div>
      <header>
        {t('Mensaje de ejemplo',{ns: 'messages'})} //Nous passons l'espace de noms.
      </header>
    </div>
  );
}