Construir una tienda para un país es fácil. Construir una tienda para 20 países es un fractal arquitectónico. Necesitas manejar:

Traducción (Idioma: Francés)
Localización (Moneda: CAD vs EUR)
Contexto del mercado (inventario: almacén de EE. UU. frente a almacén de la UE)

Por qué Maison Code habla de esto

En Maison Code Paris, actuamos como la conciencia arquitectónica de nuestros clientes. A menudo heredamos stacks “modernos” construidos sin una comprensión fundamental de la escala.

Discutimos este tema porque representa un punto de inflexión crítico en la madurez de la ingeniería. Implementarlo correctamente diferencia un MVP frágil de una plataforma resistente de nivel empresarial.

La estructura de la URL

Abogamos por subcarpetas, no por subdominios.

Malo: fr.maisoncode.paris (Autoridad de dominio dividida).
Bueno: maisoncode.paris/fr (Consolida SEO).

Implementación de middleware de remezcla

Usamos un middleware i18n personalizado en entry.server.tsx.

// Detectar configuración regional desde URL -> Cookie -> Encabezado
función de exportación resolveLocale (solicitud: Solicitud): Configuración regional {
  URL constante = nueva URL (solicitud.url);
  const pathLocale = url.pathname.split('/')[1];
  
  if (supportedLocales.includes(pathLocale)) {
    ruta de retornoLocale;
  }
  
  // Respaldo a GeoIP (encabezado de Cloudflare)
  const país = request.headers.get('cf-ipcountry');
  devolver paísALocaleMap[país] || 'es';
}

El contexto del diccionario

No codificamos cadenas. Buscamos el diccionario (JSON) para la configuración regional resuelta y lo pasamos a un contexto de React.

const t = usarTranslación();
<h1>{t('producto.addToCart')}</h1> 
// Representa "Ajouter au panier" si la configuración regional es fr

Etiquetas Hreflang

Esto es fundamental para el SEO. Debes decirle a Google que /fr/chemise es la versión francesa de /en/shirt. Generamos automáticamente estos encabezados para cada página.

<link rel="alternativo" hreflang="en" href="https://site.com/en/shirt" />
<enlace rel="alternativo" hreflang="fr" href="https://site.com/fr/chemise" />

9. Pago localizado (Markets Pro)

Dirigir el tráfico a /fr es inútil si el pago está en USD. Aprovechamos Shopify Markets Pro. El middleware detecta el país fr. Creamos el Carrito con {"país": "FR", "moneda": "EUR"}. Esto bloquea la caja para mostrar automáticamente los aranceles, impuestos (IVA) y métodos de pago locales (Cartes Bancaires). El flujo continuo desde maisoncode.paris/fr hasta una caja denominada en euros es la razón por la que vemos una conversión de +40% en Europa.

10. Mejores prácticas de redireccionamiento geográfico

Nunca redirija automáticamente sin preguntar. Si soy un estadounidense que viaja a París y me obligas a usar “.fr”, te odio. Patrón:

Detectar IP es Francia.
¿Está el usuario en .com?
Muestra una pequeña “barra” en la parte superior: “Vemos que estás en Francia. ¿Cambiar a la tienda de Francia? [Sí/No]”.
Solo redireccione si hacen clic en Sí. Excepciones: Si escriben directamente .fr, respétalo.

11. Escala global

Vendes en EE. UU. (USD) y Reino Unido (GBP). La descripción del producto es idéntica (inglés). Google ve esto como “contenido duplicado”. Solución: Canonicals autorreferenciados. La URL site.com/us/shirt apunta canónicamente a site.com/us/shirt. La URL site.com/uk/shirt apunta canónicamente a site.com/uk/shirt. Combinado con hreflang, esto le dice a Google: “Estas son páginas distintas dirigidas a diferentes mercados, no copias”. Sin esto, Google desindexa uno de ellos.

7. Negociación de contenido (Aceptar-Idioma)

El middleware no debería limitarse a mirar la URL. Debería mirar el encabezado “Accept-Language” enviado por el navegador. Si un usuario llega a / (raíz), rediríjalo:

Verifique la configuración regional de la URL (Ninguna).
Marque la cookie NEXT_LOCALE.
Verifique el encabezado Aceptar-Idioma (fr-FR). -> Redirigir a /fr.
Verifique GeoIP (Francia). -> Redirigir a /fr.
Alternativa -> /en. Este “enrutamiento inteligente” aumenta la conversión al llevar al usuario a su lengua materna automáticamente.

12. Localización de borde (trabajadores de Cloudflare)

Hacer i18n en el servidor de origen (Node.js) es demasiado lento (100 ms). Lo movemos al Borde. Los trabajadores de Cloudflare interceptan la solicitud antes de que llegue al servidor.

Entrante: GET / (de IP: Berlín).
Trabajador: “El usuario es alemán. Redirigir a /de”.
Latencia: 5 ms. El usuario ve el sitio alemán al instante. No hay “destello de contenido incorrecto”. Se trata de “Localización a la velocidad de la luz”.

13. Matices monetarios: el problema de la visualización

“10,00 USD” != “10,00 USD”. En Francia, el espacio es un espacio continuo que se utiliza como separador de mil. En Japón no existen decimales (Yen). El uso de Intl.NumberFormat es obligatorio. Pero ¿qué pasa con los “precios psicológicos”? *USD: €19.99

EUR: 19,95 € (los europeos prefieren ,95) Implementamos Reglas de Redondeo de Precios por mercado. Si el tipo de cambio dice 19,12€, lo redondeamos a 19,95€ automáticamente. Esto hace que la marca se sienta “nativa”, no como un dropshipper extranjero.

14. ¿Por qué Código Maison?

En Maison Code, no solo traducimos palabras; traducimos Contexto. Hemos implementado tiendas en más de 50 países para marcas de lujo redundantes. Sabemos que en Alemania hay que mostrar “Impressum”. Sabemos que en Japón la dirección se invierte (primero el código postal). Construimos arquitecturas que respetan estos matices culturales por defecto. Tu marca debe sentirse local, en todas partes.

15. Conclusión

Globalizarse es 10% traducción y 90% arquitectura. Puedes contratar a los mejores traductores, pero si tu estructura de URL confunde a Google, fracasarás. Si su pago no muestra los impuestos locales, fracasará. Cree un “núcleo global” con enrutamiento, middleware y manejo de divisas adecuados. Entonces, el mundo es tu mercado.

¿Perdido en la traducción?

Diseñamos lanzamientos globales para marcas que se niegan a ceder en los matices locales. Contrate a nuestros arquitectos.