Namespaces

Los namespaces son una forma de organizar los archivos de traducciones, con esto los podemos separar por funcionalidad o por tipo de contenido.

por defecto tenemos un namespace llamado translation para todas nuestras traducciones, que esta en el archivo 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 queremos separar nuestras traducciones por funcionalidad, podemos crear un nuevo namespace llamado messages.

  src/locales/es/messages.json

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

• Si queremos separar nuestras traducciones por tipo de contenido, podemos crear un nuevo namespace llamado pages.

  src/locales/es/pages.json

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

Configuración en nuestro hook

En nuestro hook de traducciones, le pasamos parametro namespace para poder pasarle el que queramos utilizar, pero por defecto le pasamos 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)
}

Utilizando namespaces

Podemos utilizar los namespaces en nuestro componente.

En este caso vamos a usar el namespace messages.

src/App.tsx

import { useTranslation } from '@/hooks/useTranslation'; Importamos nuestro hook

function App() {
  const { t } = useTranslation('messages'); //Usamos el namespace
  return (
    <div>
      <header>
        {t('Mensaje de ejemplo')}
      </header>
    </div>
  );
}

export default App;

Otra forma de utilizar el namespace es pasandolo como parámetro en la función useTranslation.

src/App.tsx

import { useTranslation } from '@/hooks/useTranslation'; Importamos nuestro hook

function App() {
  const { t } = useTranslation(); //No pasamos el namespace
  return (
    <div>
      <header>
        {t('Mensaje de ejemplo',{ns: 'messages'})} //Pasamos el namespace
      </header>
    </div>
  );
}