i18n en Next.js: cómo preparar tu web para vender en LATAM y USA
La internacionalización (i18n) no es solo traducir. Es detectar idioma, cambiar moneda, adaptar mensajes y dejar que Google te encuentre en cada país.
Si tu sitio vende a México y Estados Unidos con la misma versión, estás perdiendo dinero en los dos lados. La internacionalización (i18n) permite servir dos o más versiones de tu web sin duplicar infraestructura.
¿Qué significa i18n de verdad?
No es solo traducir botones. Una web internacionalizada bien hecha:
- Detecta el idioma del navegador y muestra la versión correspondiente.
- Cambia la moneda según el mercado objetivo (MXN, USD, COP, etc.).
- Ajusta formatos locales: fechas, números, teléfonos.
- Tiene URLs limpias:
/para tu mercado principal y/en(o/us) para el secundario. - Se lo dice a Google con etiquetas
hreflangpara que indexe cada versión en su país.
Cómo se arma en Next.js
La librería más usada hoy es next-intl. La receta corta:
- Instalas
next-intly configuras el middleware de idiomas. - Creas un archivo
messages/es.jsonymessages/en.jsoncon tus traducciones. - Defines la configuración
localePrefix: 'as-needed'para que el idioma principal no lleve prefijo. - Usas el hook
useTranslations()en tus componentes.
El resultado: el navegador en español ve tusitio.com, el navegador en inglés ve tusitio.com/en, y el código del componente es el mismo.
El detalle que casi nadie hace: precios por mercado
Un error común es cobrar lo mismo en dólares que en pesos usando la conversión directa. Eso no es estrategia, es pereza.
El mercado norteamericano paga 2–3x más por el mismo servicio web porque el costo de oportunidad del empresario allá es mayor. Si tu plan en México cuesta $3,000 MXN, en USA no debería costar $150 USD — debería costar lo que un servicio equivalente allá cuesta.
La i18n bien hecha te permite servir precios distintos por mercado sin que un usuario mexicano vea el precio en dólares ni al revés.
SEO internacional: el truco del hreflang
Google necesita saber que tu página /en/pricing es la versión en inglés de /precios. Esto se declara con etiquetas:
<link rel="alternate" hreflang="es-MX" href="https://tusitio.com/precios" />
<link rel="alternate" hreflang="en-US" href="https://tusitio.com/en/pricing" />
Sin esto, Google puede:
- Mostrar la versión en inglés a usuarios mexicanos (mala conversión).
- Penalizar tu sitio por "contenido duplicado".
- Ignorar una de las dos versiones.
¿Cuándo lo necesitas?
- Tu producto ya funciona en un mercado y quieres abrir otro.
- Tu tráfico orgánico viene 20%+ de otro país.
- Tus competidores ya están localizados y tú no.
- Quieres cobrar tickets más altos en mercados con mayor poder adquisitivo.
En ServerStack Solutions
Todas nuestras webs quedan listas para i18n desde el día 1, incluyo la infraestructura (middleware, detección de locale, hreflang automáticos y traducciones base).
Contáctanos si quieres abrir tu primer mercado internacional.
Relacionado: Importancia del SEO para tu negocio y Server-Side Rendering con Next.js.
Preguntas frecuentes
¿next-intl o next-i18next?
Para Next.js 13+ con App Router, next-intl es el estándar actual. next-i18next sigue siendo opción pero nació en la era de Pages Router; su soporte a App Router es más limitado. Si arrancas proyecto nuevo, elige next-intl.
¿Afecta al SEO tener el sitio en dos idiomas?
Al contrario, lo mejora si usas hreflang correcto. Google indexa cada versión del idioma por separado y muestra la relevante según el usuario. El error típico es traducir con JavaScript en cliente (Google no indexa bien) o usar URLs sin prefijo de idioma (/producto en vez de /es/producto y /en/producto).
¿Necesito traducir todo manualmente?
Para copy importante (landing, checkout, emails) sí conviene traducción humana o revisión. Para catálogo masivo, herramientas como DeepL o GPT producen traducciones aceptables que luego revisa un humano. Lo que nunca debes hacer: Google Translate en vivo sobre el DOM — mata SEO y UX.