DEV Community: Rafa Moral

Next.js multi idioma

Rafa Moral — Tue, 24 Nov 2020 21:12:17 +0000

Con la versión 10 de Next.js han introducido el soporte a internacionalización. Se puede configurar un listado de idiomas, el idioma por defecto y, en caso de requerirlo, un dominio específico para cada uno. Next.js hará la detección del idioma del usuario y gestionará las rutas automáticamente.

La gestión de idioma por Next.js debe ser complementada con la gestión de las traducciones, utilizando alguna biblioteca Open Source existente o llevando a cabo el desarrollo nosotros mismos. En la documentación de Next.js recomiendan soluciones como react-intl, react-i18next, lingui o rosetta.

En este artículo, os voy a explicar cómo he llevado a cabo la implementación de Polyglot.js, una herramienta desarrollada y mantenida por Airbnb.

Lo primero que deberemos hacer es instalar la dependencia:

$ npm install node-polyglot --S

Internacionalización de rutas con Next.js 10 o superior

La configuración de internacionalización en Next.js debe hacerse en el archivo next.config.js, en este ejemplo vamos a utilizar la opción de Sub-path Routing con locales sin región, es decir, las url's de las páginas de cada idioma tendrán /es o /en al inicio del path.

A continuación la configuración de next.config.js:

// next.config.js
module.exports = {
  i18n: {
    /* Listado de locales que vamos a soportar */
    locales: ['en', 'es'],
    /* Locale seleccionado por defecto */
    defaultLocale: 'es'
  }
}

Traducción de textos con Polyglot.js en Next.js

Para integrar Polyglot.js con Next.js he creado un contexto, el cual recibirá el locale actual en el que está corriendo la aplicación. Este contexto contendrá la instancia de Polyglot con la configuración seleccionada.

// src/I18n.js
import {createContext, useContext, useMemo} from 'react'
import Polyglot from 'node-polyglot'

// Creamos las traducciones para cada idioma.
// Es recomendable mover esto a otros archivos.
const literals = {
  en: {hello: 'hello'},
  es: {hello: 'hola'}
}

// Definimos los idiomas a los que damos soporte
const locales = {
  en: 'en',
  es: 'es'
}

// Creamos el contexto
const I18nContext = createContext()

/**
 * Componente que encapsula la aplicación dentro del Provider.
 * Este componente será el responsable de actualizar el idioma activado en la aplicación
 */
function I18n({children, locale}) {
  // Cada vez que el locale cambie, obtendremos una instancia de i18n actualizada.
  const i18n = useMemo(
    () =>
      new Polyglot({
        locale,
        phrases: literals[locale]
      }),
    [locale]
  )

  return <I18nContext.Provider value={i18n}>{children}</I18nContext.Provider>
}

// Creamos un Hook para utilizar el contexto en los componentes que necesitemos
const useTranslate = () => useContext(I18nContext)

export {locales, useTranslate}
export default I18n

Lo siguiente que debemos hacer consiste en utilizar este contexto en la aplicación. Yo he optado por utilizar el componente I18n directamente en el componente _app.js, enviándole la prop locale que se puede obtener directamente del Hook useRouter.

// src/pages/_app.js
import {useRouter} from 'next/router'
import I18n from '../i18n'

function MyApp({Component, pageProps}) {
  const {locale} = useRouter()

  return (
    <I18n locale={locale}>
      <Component {...pageProps} />
    </I18n>
  )
}

export default MyApp

Localización de textos en componentes y páginas

Para utilizar las traducciones que hemos ido añadiendo en el objeto literals utilizaremos el valor del contexto, que corresponde con la instancia de Polyglot. Para ello, utilizaremos el Hook useTranslate.

// src/pages/index.js
import {useTranslate} from '../i18n'

const Home = () => {
  const i18n = useTranslate()
  return <p>{i18n.t('hello')}</p>
}

export default Home

Parte 1: RegExp - Qué son, para qué se utilizan y cómo funcionan

Rafa Moral — Tue, 17 Nov 2020 18:42:02 +0000

Las expresiones regulares suelen estar olvidadas por la gran mayoría de Frontend, imagino que algunos motivos pueden ser su complejidad y las pocas veces que se necesitan. Con esta serie de artículos pretendo otorgarles la importancia que merecen explicando todo lo que un Frontend debe conocer sobre ellas.

En esta primera parte, pretendo explicar qué son, para qué se utilizan y cómo funcionan.

Qué son las expresiones regulares

Se suele definir una expresión regular como:

Una expresión regular es una especificación declarativa que describe la estructura textual a la que debe corresponder una cadena de coincidencia

O, dentro del contexto de Google Analytics, también como:

Las expresiones regulares son secuencias específicas de caracteres que coinciden con patrones de sus datos de Analytics o con parte de estos.

Sin embargo, las expresiones regulares no son declarativas, ni describen, ni especifican una estructura. Tampoco son cadenas con las que deba coincidir nada.

Las expresiones regulares son código. Al escribir una expresión regular escribimos un "programa", en un lenguaje un poco peculiar, pero al fin y al cabo estamos programando. Por lo tanto, ésta es una definición más concreta de lo que son las expresiones regulares:

Una expresión regular es una especificación imperativa de una secuencia de bloques de instrucciones estructuradas, diseñada para ejecutar alguna tarea en una máquina virtual altamente especializada. Las expresiones regulares son secuencias estructuradas de instrucciones, bucles, control de flujo, aserciones y gestión de excepciones.

Una expresión regular también es conocida por regex o RegExp.

Para qué se utilizan

Utilizamos expresiones regulares para evitar tener que escribir código en Javascript (aunque también en C, C#, Perl, PHP, Python o el lenguaje que utilicemos).

Utilizar una RegExp es el equivalente a llamar a una función, ya que a partir de un argumento -la cadena que debe coincidir- se ejecutan sus instrucciones (la regex) y recogemos el resultado, que puede ser un booleano o una serie de resultados como grupo de coincidencias.

Dialectos

Las regex no son un único lenguaje, son toda una familia de lenguajes o dialectos y cada uno de ellos tiene sus peculiaridades y suelen ser incompatibles entre sí. Todos utilizan las mismas instrucciones, con significados completamente distintos.

Los dialectos más importantes son:

BRE: PHP, ed, sed, grep.
ERE: egrep, awk, Tcl
EMACS: emacs
VIM: vim
PCRE: PHP, Perl, Javascript (parcialmente), apache, Google Analytics (un subconjunto muy reducido), C#, java, python...
PSIX: Perl 6

Por lo tanto, tenemos que determinar qué lenguaje habla nuestro entorno, que en este caso es PCRE para Javascript.

El modelo de ejecución

En el modelo de ejecución de una regex simple como puede ser /abc/, vemos tres instrucciones:

coincide con una a
a continuación coincide con una b
a continuación coincide con una c

En cada instrucción hay una excepción implícita, coincide o lanza excepción, en ese caso, hace backtrack y continúa con el siguiente carácter.

Por lo tanto, podemos representar la regex /abc/ como si de una maquina de estados finita (FSM) se tratase mediante el siguiente gráfico:

Ejemplo de ejecución

Dada la cadena de texto 01ababc:

¡Y así es cómo funciona una expresión regular!

Las instrucciones

Cada carácter en una regex es una instrucción y por norma general, o coincide con este carácter o hace backtrack.

Habitualmente tenemos que presentar a una regex una serie de alternativas u opciones, por ejemplo /abc|abx/. En este caso, tenemos dos posibles caminos, coincide con una a, una b y una c o con una a, una b y una x.

Es muy importante conocer que toda RegExp:

Prueba todos los caminos posibles empezando por la izquierda.
Intenta hacer el mínimo backtracking posible.
Si hace match, termina.
Si falla, reintenta con la siguiente posición.
Si fallan todos los caminos, en cada reintento, reporta fallo.

Además, las RegExp no son muy listas... El motor intenta siempre todos los caminos posibles antes de avanzar por el texto y siempre encuentra el primero de los posibles substrings que coincide en vez de la mejor coincidencia, por lo que esto tiene algunas consecuencias.

Ante este escenario:

Cadena: "Siempre utilizo el mail de gmail"
RegExp: /gmail|mail/

El resultado es: "Siempre utilizo el mail de gmail"

Por lo que, una expresión regular siempre encuentra la primera y más corta coincidencia y eso hace que sea muy fácil cometer errores de éste estilo:

Cadena: "He perdido la fotografía"
RegExp: /foto|fotografía/

Para evitarlo, invertid siempre el orden de las keywords en la regex.

Cadena: "He perdido la fotografía"
RegExp: /fotografía|foto/

⚠️ Las expresiones regulares que fallan suelen ser mucho más lentas que las que coinciden. Y recordad algo muy importante, las expresiones regulares tienen la manía de hacer lo que les decimos que hagan, no lo que queremos que hagan.