Añadir un idioma

Introducción

Siempre haber el caso en que tengamos que añadir un nuevo idioma a nuestra aplicación. Pongamos por el caso que debemos de añadir el Francés.

1. Crear fichero de traducciones

Copiar el fichero de traducciones de un idioma existente y nombrarlo con el locale correspondiente.

cp packages/i18n/src/locales/es.ts packages/i18n/src/locales/fr.ts

2. Traducir los mensajes

Una vez creado el fichero de traducciones del nuevo idioma habrá que traducir todos los mensajes

packages/i18n/src/locales/fr.ts
...
  'general.backToHome': 'Retour au début',

  'header.blog': 'Blog',
  'header.myAccount': 'Mon compte',
  'header.myLocation': 'Ma position',

  'search.title': 'Résultats',
  'search.results': 'Resultados de búsqueda',
  'search.searcher': 'Résultats de recherche',
  'search.resultsFor': 'Résultats pour:',
...

3. Importar traducciones

Una vez creado y traducido el fichero de traducciones hay que hacer que incorporarlo para que se tienga en cuenta en el momento de pedir un mensaje.

packages/i18n/src/translate.ts
import type { Translations } from './types'
import { texts as ca } from './locales/ca'
import { texts as es } from './locales/es'
+ import { texts as fr } from './locales/fr'
import { texts as fixture } from './locales/fixture'
const translationsTexts = {
  ca,
  es,
+ fr,
  fixture // Only for testing purposes
}

class MissingTranslationError {
  message: string
  name: string

  constructor (message) {
    this.message = message
    this.name = 'MissingTranslationError' // (2)
  }
}
...

4. Añadir idioma a la configuración

Una vez tenemos todos los ficheros de i18n creados, ya podemos configurar la aplicación para que use el nuevo idioma.

mercury/next.config.mjs
...
  i18n: {
-    locales: ['es'],
+    locales: ['es', 'fr'],
    defaultLocale: 'es'
  },
...