⚡Globalisierung

Internationalisierung (i18n)

Deine App in jeder Sprache verfuegbar machen

Mit Internationalisierung erreichst du Nutzer weltweit. next-intl macht es einfach: Texte auslagern, Sprache wechseln, fertig. Und deine App ist bereit fuer jeden Markt.

Pro-Tip — Der schnelle Weg
Starte von Anfang an mit i18n, auch wenn du erstmal nur eine Sprache brauchst. Texte spaeter aus dem Code zu extrahieren ist zehnmal mehr Arbeit als sie gleich richtig zu machen.
Seite 1
1

next-intl installieren

next-intl ist die beliebteste i18n-Library fuer Next.js App Router. Sie unterstuetzt Server und Client Components und hat automatische Spracherkennung.

npm install next-intl


// Ordnerstruktur
messages/
 de.json
 en.json
app/
 [locale]/
 layout.tsx
 page.tsx
2

Uebersetzungsdateien erstellen

Erstelle JSON-Dateien mit allen Texten deiner App. Nutze verschachtelte Schluessel fuer Struktur. Jede Sprache hat eine eigene Datei.

// messages/de.json
{
 "home": {
 "title": "Willkommen",
 "subtitle": "Die beste App der Welt",
 "cta": "Jetzt starten"
 },
 "nav": {
 "dashboard": "Dashboard",
 "settings": "Einstellungen"
 }
}


// messages/en.json
{
 "home": {
 "title": "Welcome",
 "subtitle": "The best app in the world",
 "cta": "Get started"
 }
}
3

Middleware fuer Locale-Routing

Die Middleware erkennt die Browsersprache des Nutzers und leitet auf die richtige Locale-Route weiter.

// middleware.ts
import createMiddleware from 'next-intl/middleware';


export default createMiddleware({
 locales: ['de', 'en'],
 defaultLocale: 'de'
});


export const config = {
 matcher: ['/', '/(de|en)/:path*']
};
4

Texte in Komponenten nutzen

Mit dem useTranslations Hook greifst du auf die Uebersetzungen zu. Der Schluessel entspricht der Struktur in der JSON-Datei.

import { useTranslations } from 'next-intl';


function HomePage() {
 const t = useTranslations('home');


 return (
 <div>
 <h1>{t('title')}</h1>
 <p>{t('subtitle')}</p>
 <button>{t('cta')}</button>
 </div>
 );
}
5

Sprachwechsler einbauen

Ein einfacher Button oder Dropdown der die Locale in der URL aendert. Der Rest passiert automatisch ueber die Middleware und den Provider.

import { useRouter, usePathname } from 'next/navigation';


function LanguageSwitcher() {
 const router = useRouter();
 const pathname = usePathname();


 function switchLocale(locale: string) {
 router.push(pathname.replace(/^\/(de|en)/, `/${locale}`));
 }


 return (
 <div>
 <button onClick={() => switchLocale('de')}>DE</button>
 <button onClick={() => switchLocale('en')}>EN</button>
 </div>
 );
}
Seite 2
Warum das funktioniert
  • 75 Prozent der Internetnutzer sprechen kein Englisch als Muttersprache
  • Lokalisierte Apps haben hoehere Conversion Rates in jedem Markt
  • SEO profitiert von sprachspezifischen URLs und Inhalten
  • Einmal eingerichtet ist jede neue Sprache nur eine JSON-Datei
Tipps
  • Hardcoded Strings ab Tag 1 vermeiden, immer Keys nutzen
  • Zahlen und Datumsformate sind sprachabhaengig, Intl API nutzen
  • RTL Sprachen wie Arabisch brauchen eigenes CSS Layout
  • Uebesetzer koennen direkt die JSON-Dateien bearbeiten
Seite 3
Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen