MAISON CODE .
/ i18n · Remix · Global

Globale Architektur: i18n-Routing in Remix

Umgang mit „/en-us“, „/fr-ca“ und „/jp“. So erstellen Sie einen länderspezifischen Router und eine Middleware für internationale Shopify-Shops.

AB
Alex B.
Globale Architektur: i18n-Routing in Remix

Der Aufbau eines Shops für ein Land ist einfach. Der Bau eines Stores für 20 Länder ist ein architektonisches Fraktal. Sie müssen Folgendes bewältigen:

  • Übersetzung (Sprache: Französisch)
  • Lokalisierung (Währung: CAD vs. EUR)
  • Marktkontext (Bestand: US-Lager vs. EU-Lager)

Warum Maison Code darüber spricht

Bei Maison Code Paris fungieren wir als das architektonische Gewissen unserer Kunden. Wir übernehmen oft „moderne“ Stacks, die ohne grundlegendes Verständnis für Skalierung gebaut wurden.

Wir diskutieren dieses Thema, weil es einen kritischen Wendepunkt in der technischen Reife darstellt. Die korrekte Implementierung unterscheidet ein fragiles MVP von einer widerstandsfähigen Plattform auf Unternehmensniveau.

Die URL-Struktur

Wir befürworten Unterordner, keine Subdomains.

  • Schlecht: „fr.maisoncode.paris“ (Splits Domain Authority).
  • Gut: maisoncode.paris/fr (Konsolidiert SEO).

Remix-Middleware-Implementierung

Wir verwenden eine angepasste „i18n“-Middleware in „entry.server.tsx“.

„Typoskript // Gebietsschema anhand der URL erkennen -> Cookie -> Header Exportfunktion „resolveLocale(request: Request): Locale { const url = neue URL(request.url); const pathLocale = url.pathname.split(’/’)[1];

if (supportedLocales.includes(pathLocale)) { return pathLocale; }

// Fallback auf GeoIP (Cloudflare Header) const Country = request.headers.get(‘cf-ipcountry’); Geben Sie „countryToLocaleMap[country] ||“ zurück ‘en’; } „

Der Wörterbuchkontext

Wir codieren keine Zeichenfolgen fest. Wir rufen das Wörterbuch (JSON) für das aufgelöste Gebietsschema ab und übergeben es an einen Reaktionskontext.

„tsx const t = useTranslation();

{t('product.addToCart')

// Rendert „Ajouter au panier“, wenn das Gebietsschema „fr“ ist „

Hreflang-Tags

Dies ist entscheidend für SEO. Sie müssen Google mitteilen, dass „/fr/chemise“ die französische Version von „/en/shirt“ ist. Wir generieren diese Header automatisch für jede Seite.

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


## 9. Lokalisierter Checkout (Markets Pro)

Die Weiterleitung des Datenverkehrs an „/fr“ ist nutzlos, wenn der Checkout in USD erfolgt.
Wir nutzen **Shopify Markets Pro**.
Middleware erkennt das Land „fr“.
Wir erstellen den Warenkorb mit `{"country": "FR", "currency": "EUR"}`.
Dadurch wird der Checkout gesperrt, um Zölle, Steuern (Mehrwertsteuer) und lokale Zahlungsmethoden (Cartes Bancaires) automatisch anzuzeigen.
Der nahtlose Übergang von „maisoncode.paris/fr“ zu einem auf Euro lautenden Checkout ist der Grund, warum wir in Europa eine Konvertierung von +40 % verzeichnen.

## 10. Best Practices für Geo-Redirect

**Niemals automatisch umleiten, ohne zu fragen.**
Wenn ich ein Amerikaner bin, der in Paris reist, und du mich zu „.fr“ zwingst, hasse ich dich.
**Muster**:
1. Erkennen Sie, dass die IP-Adresse Frankreich ist.
2. Ist der Benutzer auf „.com“?
3. Zeigen Sie oben eine kleine „Leiste“ an: „Wir sehen, dass Sie in Frankreich sind. Zum Frankreich-Shop wechseln? [Ja/Nein]“.
4. Leiten Sie nur weiter, wenn sie auf „Ja“ klicken.
Ausnahmen: Wenn sie direkt „.fr“ eingeben, respektieren Sie dies.

## 11. Globale Skala

Sie verkaufen in den USA (USD) und im Vereinigten Königreich (GBP). Die Produktbeschreibung ist identisch (englisch).
Google betrachtet dies als „Duplicate Content“.
**Lösung**: Selbstreferenzierende Canonicals.
Die URL „site.com/us/shirt“ verweist kanonisch auf „site.com/us/shirt“.
Die URL „site.com/uk/shirt“ verweist kanonisch auf „site.com/uk/shirt“.
In Kombination mit „hreflang“ sagt dies Google: „Dies sind unterschiedliche Seiten, die auf unterschiedliche Märkte abzielen, keine Kopien.“
Ohne dies deindexiert Google einen von ihnen.

## 7. Inhaltsverhandlung (Accept-Language)

Middleware sollte nicht nur auf die URL achten.
Es sollte sich den vom Browser gesendeten Header „Accept-Language“ ansehen.
Wenn ein Benutzer bei „/“ (root) ankommt, leiten Sie ihn um:
1. Überprüfen Sie das URL-Gebietsschema (Keine).
2. Überprüfen Sie das Cookie „NEXT_LOCALE“.
3. Überprüfen Sie den Header „Accept-Language“ („fr-FR“). -> Weiterleiten zu „/fr“.
4. Überprüfen Sie GeoIP („Frankreich“). -> Weiterleiten zu „/fr“.
5. Fallback -> `/en`.
Dieses „Smart Routing“ erhöht die Conversion, indem es den Benutzer automatisch in seiner Muttersprache landet.

## 12. Edge-Lokalisierung (Cloudflare Workers)

Die Ausführung von i18n auf dem Ursprungsserver (Node.js) ist zu langsam (100 ms).
Wir verschieben es an den **Edge**.
Cloudflare-Worker fangen die Anfrage ab, *bevor* sie den Server erreicht.
1. **Eingehend**: `GET /` (von IP: Berlin).
2. **Worker**: „Benutzer ist Deutsch. Weiterleitung zu `/de`.“
3. **Latenz**: 5 ms.
Der Nutzer sieht sofort die deutsche Seite. Kein „Aufblitzen falscher Inhalte“.
Das ist „Lokalisierung mit Lichtgeschwindigkeit“.

## 13. Währungsnuance: Das Anzeigeproblem

„10,00 USD“ != „10,00 USD“.
In Frankreich ist das Leerzeichen ein geschütztes Leerzeichen, das als Tausendertrennzeichen verwendet wird.
In Japan gibt es keine Dezimalstellen (Yen).
Die Verwendung von „Intl.NumberFormat“ ist obligatorisch.
Aber wie sieht es mit „Psychological Pricing“ aus?
* USD: 19,99 $
* EUR: 19,95 € (Europäer bevorzugen ,95 €)
Wir implementieren **Preisrundungsregeln** pro Markt.
Wenn der Wechselkurs 19,12 € beträgt, runden wir ihn automatisch auf 19,95 €.
Dadurch wirkt die Marke „einheimisch“ und nicht wie ein ausländischer Dropshipper.

## 14. Warum Maison Code?

Bei **Maison Code** übersetzen wir nicht nur Wörter; Wir übersetzen **Kontext**.
Wir haben in über 50 Ländern Filialen für überflüssige Luxusmarken eingerichtet.
Wir wissen, dass Sie in Deutschland das „Impressum“ vorzeigen müssen.
Wir wissen, dass in Japan die Adressform umgekehrt ist (Postleitzahl zuerst).
Wir bauen Architekturen, die diese kulturellen Nuancen standardmäßig respektieren.
Ihre Marke sollte sich überall lokal anfühlen.

## 15. Fazit

Global zu werden besteht zu 10 % aus Übersetzung und zu 90 % aus Architektur.
Sie können die besten Übersetzer engagieren, aber wenn Ihre URL-Struktur Google verwirrt, werden Sie scheitern.
Wenn an Ihrer Kasse keine lokalen Steuern angezeigt werden, werden Sie scheitern.
Bauen Sie einen „Global Core“ mit geeignetem Routing, Middleware und Währungshandhabung auf.
Dann ist die Welt Ihr Markt.


<hr style="margin: 1rem 0" />

### In der Übersetzung verloren?
Wir konzipieren globale Rollouts für Marken, die keine Kompromisse bei lokalen Nuancen eingehen.
**[Beauftragen Sie unsere Architekten](/contact)**.