MAISON CODE .
/ i18n · Remix · Global

Architecture globale : routage i18n dans Remix

Gestion de `/en-us`, `/fr-ca` et `/jp`. Comment créer un routeur et un middleware prenant en compte les paramètres régionaux pour les magasins Shopify internationaux.

AB
Alex B.
Architecture globale : routage i18n dans Remix

Construire un magasin pour un pays est facile. Construire un magasin pour 20 pays est une fractale architecturale. Vous devez gérer :

  • Traduction (Langue : Français)
  • Localisation (devise : CAD vs EUR)
  • Contexte du marché (Inventaire : entrepôt américain vs entrepôt européen)

Pourquoi Maison Code en parle

Chez Maison Code Paris, nous agissons comme la conscience architecturale de nos clients. Nous héritons souvent de stacks “modernes” construites sans compréhension fondamentale de l’échelle.

Nous abordons ce sujet car il représente un point de pivot critique dans la maturité de l’ingénierie. Une mise en œuvre correcte différencie un MVP fragile d’une plateforme résiliente de niveau entreprise.

La structure des URL

Nous préconisons des sous-dossiers et non des sous-domaines.

  • Mauvais : fr.maisoncode.paris (Splits Domain Authority).
  • Bon : maisoncode.paris/fr (Consolide le SEO).

Implémentation du middleware Remix

Nous utilisons un middleware i18n personnalisé dans entry.server.tsx.

// Détecter les paramètres régionaux à partir de l'URL -> Cookie -> En-tête
fonction d'exportation solveLocale (requête : requête) : Locale {
  const url = nouvelle URL (request.url);
  const pathLocale = url.pathname.split('/')[1];
  
  if (supportedLocales.includes(pathLocale)) {
    retourner pathLocale ;
  }
  
  // Repli sur GeoIP (en-tête Cloudflare)
  const country = request.headers.get('cf-ipcountry');
  retourner countryToLocaleMap[pays] || 'fr';
}

Le contexte du dictionnaire

Nous ne codons pas les chaînes en dur. Nous récupérons le dictionnaire (JSON) pour les paramètres régionaux résolus et le transmettons à un contexte React.

const t = useTranslation();
<h1>{t('product.addToCart')}</h1> 
// Rend "Ajouter au panier" si la locale est fr

Balises hreflang

Ceci est essentiel pour le référencement. Vous devez indiquer à Google que /fr/chemise est la version française de /en/shirt. Nous générons automatiquement ces en-têtes pour chaque page.

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

9. Paiement localisé (Markets Pro)

Acheminer le trafic vers /fr est inutile si le paiement est en USD. Nous exploitons Shopify Markets Pro. Le middleware détecte le pays « fr ». Nous créons le Panier avec {"country": "FR", "currency": "EUR"}. Cela verrouille la caisse pour afficher automatiquement les droits, taxes (TVA) et les modes de paiement locaux (Cartes Bancaires). Le flux fluide de « maisoncode.paris/fr » vers une caisse libellée en euros est la raison pour laquelle nous constatons +40 % de conversion en Europe.

10. Meilleures pratiques de géo-redirection

Jamais de redirection automatique sans demander. Si je suis un Américain voyageant à Paris et que vous m’obligez à utiliser le .fr, je vous déteste. Modèle :

  1. Détecter l’IP est la France.
  2. L’utilisateur est-il sur « .com » ?
  3. Affichez un petit « Bar » en haut : « Nous voyons que vous êtes en France. Passer à la boutique France ? [Oui/Non] ».
  4. Redirigez uniquement s’ils cliquent sur Oui. Exceptions : S’ils tapent directement .fr, respectez-le.

11. Échelle mondiale

Vous vendez aux États-Unis (USD) et au Royaume-Uni (GBP). La description du produit est identique (anglais). Google considère cela comme du « contenu en double ». Solution : Canoniques auto-référencés. L’URL « site.com/us/shirt » pointe canoniquement vers « site.com/us/shirt ». L’URL « site.com/uk/shirt » pointe canoniquement vers « site.com/uk/shirt ». Combiné avec hreflang, cela indique à Google : “Ce sont des pages distinctes ciblant différents marchés, pas des copies.” Sans cela, Google désindexe l’un d’entre eux.

7. Négociation de contenu (Accepter-Langue)

Le middleware ne doit pas se contenter de regarder l’URL. Il doit examiner l’en-tête « Accept-Language » envoyé par le navigateur. Si un utilisateur arrive sur / (root), redirigez-le :

  1. Vérifiez les paramètres régionaux de l’URL (Aucun).
  2. Cochez le cookie NEXT_LOCALE.
  3. Vérifiez l’en-tête Accept-Language (fr-FR). -> Redirection vers /fr.
  4. Vérifiez GeoIP (« France »). -> Redirection vers /fr.
  5. Repli -> /en. Ce « Smart Routing » augmente la conversion en attirant automatiquement l’utilisateur dans sa langue maternelle.

12. Localisation Edge (Cloudflare Workers)

Faire i18n sur le serveur d’origine (Node.js) est trop lent (100 ms). Nous le déplaçons vers le Edge. Cloudflare Workers intercepte la requête avant qu’elle n’atteigne le serveur.

  1. Entrant : GET / (depuis IP : Berlin).
  2. Travailleur : “L’utilisateur est allemand. Rediriger vers /de.”
  3. Latence : 5 ms. L’utilisateur voit instantanément le site allemand. Pas de « Flash de contenu erroné ». Il s’agit de « Localisation à la vitesse de la lumière ».

13. Nuance monétaire : le problème d’affichage

“10,00 USD” != “10,00 USD”. En France, l’espace est un espace insécable utilisé comme séparateur de mille. Au Japon, il n’y a pas de décimales (Yen). L’utilisation de Intl.NumberFormat est obligatoire. Mais qu’en est-il de la « tarification psychologique » ? * USD : 19,99 €

  • EUR : 19,95 € (les Européens préfèrent ,95) Nous mettons en œuvre des Règles d’arrondi des prix par marché. Si le taux de change indique 19,12 €, nous l’arrondissons automatiquement à 19,95 €. Cela donne à la marque un sentiment de « natif », pas comme un dropshipper étranger.

14. Pourquoi Maison Code ?

Chez Maison Code, nous ne traduisons pas seulement des mots ; nous traduisons Contexte. Nous avons déployé des magasins dans plus de 50 pays pour les marques de luxe redondantes. Nous savons qu’en Allemagne, vous devez montrer “Impressum”. On sait qu’au Japon, la forme de l’adresse est inversée (Zip Code en premier). Nous construisons des architectures qui respectent par défaut ces nuances culturelles. Votre marque doit se sentir locale, partout.

15. Conclusion

Se mondialiser, c’est 10 % de traduction et 90 % d’architecture. Vous pouvez embaucher les meilleurs traducteurs, mais si la structure de votre URL confond Google, vous échouerez. Si votre paiement n’indique pas les taxes locales, vous échouerez. Créez un « noyau global » avec un routage, un middleware et une gestion des devises appropriés. Ensuite, le monde est votre marché.

Perdu dans la traduction ?

Nous concevons des déploiements mondiaux pour les marques qui refusent de faire des compromis sur les nuances locales. Engagez nos Architectes.