HomeCasa Prompts

Internationalisierung (i18n) im Next.js App Router einrichten

Baue eine mehrsprachige Next.js-Website mit Sprachrouten, Spracherkennung, serverseitigen Wörterbüchern, Sprachumschalter, hreflang und regionaler Datums- und Preisformatierung. Entwickelt für ChatGPT, Claude, Gemini und Microsoft Copilot. Er enthält 5 anpassbare Variablen und lässt sich kostenlos mit einem Klick kopieren.

Experte · Code · Redaktionelle Prüfung ausstehend

Entwickelt für:

Prompt

Arbeite als Senior-Next.js-Entwickler mit Erfahrung in mehrsprachigen Websites und internationalem SEO.

Kontext:
- Sprachen: {{sprachen}}
- Standardsprache: {{standardsprache}}
- URL-Strategie: {{url_strategie}}
- Ansatz: {{ansatz}}
- Herkunft der Texte: {{textquelle}}

Bevor du Code schreibst, kläre mit mir die Next.js-Version und ob bestehende Routen weiter funktionieren müssen; wenn ich es nicht weiß, nenne deine Annahme.

Liefere:
1. Die Ordnerstruktur mit dem Segment `[locale]` und wie Layouts, Seiten und Metadaten zusammenspielen.
2. Die Middleware-Datei (oder ihr Gegenstück in deiner Version), die die Sprache über das gespeicherte Cookie des Nutzers und den Accept-Language-Header erkennt und gemäß {{url_strategie}} ohne Schleifen weiterleitet.
3. Serverseitiges Laden der Wörterbücher mit typisierten Schlüsseln, damit TypeScript fehlende meldet, plus Fallback auf die Standardsprache.
4. Einen barrierefreien Sprachumschalter, der den aktuellen Pfad beibehält und die Wahl speichert.
5. SEO-Metadaten: `lang` am html-Element, kanonische URL und hreflang-Alternativen (inklusive x-default) auf jeder Seite sowie generateStaticParams zum Vorrendern jeder Sprache.
6. Formatierung von Datum, Zahlen, Währungen und Pluralformen mit Intl oder den Hilfsfunktionen von {{ansatz}}.
7. Eine Checkliste vor dem Livegang.

Vorgaben:
- Übersetze keine echten Inhalte: Beispieltexte bleiben pro Sprache als [AUSFÜLLEN] stehen.
- Leite Crawler nicht allein anhand der IP weiter und verstecke keine Inhalte je nach Land.
- UI-Texte gehören in die Wörterbücher, nicht in die Komponenten.

Format: ein Codeblock pro Datei mit Pfad und eine kurze Notiz zu jeder Entscheidung.

So verwenden Sie ihn

  1. Nenne die Sprachen, die Standardsprache und ob jede URL ein Präfix tragen soll. 2. Wähle eine Bibliothek oder eigene Wörterbücher. 3. Lege die Dateien in einem Branch an, teste die Weiterleitungen und prüfe hreflang vor dem Livegang mit einem SEO-Tool.

Anwendungsbeispiel

Sprachen: de, en, fr · Standard: de · URL: Präfix außer für die Standardsprache · Ansatz: next-intl · Texte: JSON-Dateien im Repository.

Beispielergebnis

Annahme: Next.js 15 und next-intl 4. Die Routen liegen in app/[locale]/layout.tsx und app/[locale]/page.tsx.

Routing, Middleware und Laden der Texte

// src/i18n/routing.ts
import { defineRouting } from 'next-intl/routing';

export const routing = defineRouting({
  locales: ['de', 'en', 'fr'],
  defaultLocale: 'de',
  localePrefix: 'as-needed', // /ueber-uns (de), /en/..., /fr/...
});

// src/middleware.ts
import createMiddleware from 'next-intl/middleware';
import { routing } from './i18n/routing';

export default createMiddleware(routing);
export const config = { matcher: ['/((?!api|_next|_vercel|.*\\..*).*)'] };

// src/i18n/request.ts
import { getRequestConfig } from 'next-intl/server';
import { hasLocale } from 'next-intl';
import { routing } from './routing';

export default getRequestConfig(async ({ requestLocale }) => {
  const requested = await requestLocale;
  const locale = hasLocale(routing.locales, requested) ? requested : routing.defaultLocale;
  return { locale, messages: (await import(`../../messages/${locale}.json`)).default };
});

Die Middleware prüft zuerst das Cookie NEXT_LOCALE, dann Accept-Language; mit as-needed hat Deutsch kein Präfix, und es entstehen keine Redirect-Schleifen. Die Texte liegen in messages/de.json, en.json und fr.json mit [AUSFÜLLEN]-Werten …

Wichtige Fakten

Kategorie
Programmierung & Entwicklung · Next.js
Ausgabetyp
Code
Niveau
Experte
Entwickelt für
ChatGPT, Claude, Gemini und Microsoft Copilot
Verifiziert in
Redaktionelle Prüfung ausstehend
Variablen
Sprachen, Standardsprache, URL-Strategie, Ansatz und Herkunft der Texte
Sprache
Deutsch
Preis
Kostenlos, ohne Anmeldung
Aktualisiert
07.11.2026

Häufig gestellte Fragen

Ist next-intl besser als eigene Wörterbücher?

Bei wenig Text ohne komplexe Pluralformen reichen eigene Wörterbücher. Brauchst du Pluralregeln, ICU-Formatierung, Übersetzungen in Client-Komponenten und typisierte Schlüssel, spart eine Bibliothek wie next-intl Arbeit.

Soll ich automatisch nach Browsersprache weiterleiten?

Beim ersten Besuch ist das vertretbar, aber respektiere immer die gespeicherte Wahl und halte jede Sprach-URL direkt erreichbar. So können Suchmaschinen alle Versionen crawlen.

Wofür ist x-default bei hreflang?

Es sagt Suchmaschinen, welche Seite sie zeigen sollen, wenn keine Sprache zum Nutzer passt, meist die Seite der Standardsprache oder eine Sprachauswahl.

Wofür ist dieser Prompt gedacht?

Baue eine mehrsprachige Next.js-Website mit Sprachrouten, Spracherkennung, serverseitigen Wörterbüchern, Sprachumschalter, hreflang und regionaler Datums- und Preisformatierung.

Mit welchen KI-Tools funktioniert er?

Er ist für ChatGPT, Claude, Gemini und Microsoft Copilot entwickelt. Wir haben ihn in diesen Tools noch nicht überprüft, daher können die Ergebnisse variieren.

Wie passe ich den Prompt an?

Klicken Sie auf „Anpassen“ und füllen Sie die Variablen aus (Sprachen, Standardsprache, URL-Strategie, Ansatz und Herkunft der Texte). Der Text wird sofort aktualisiert und lässt sich anschließend mit einem Klick kopieren. Die Werte werden nur in Ihrem Browser gespeichert.

Brauche ich Erfahrung, um ihn zu verwenden?

Er ist für Experten: Er richtet sich an Personen mit Erfahrung im Thema, die das Ergebnis beurteilen und anpassen können.

Ist dieser Prompt kostenlos?

Ja. Jeder Prompt von HomeCasa Prompts ist kostenlos, ohne Anmeldung und ohne Abonnement. Sie können ihn auch in beruflichen Projekten verwenden.

Kann ich der KI-Ausgabe vertrauen?

Betrachten Sie sie als hochwertigen Entwurf: Prüfen Sie Daten, Zahlen und wichtige Aussagen immer, bevor Sie etwas veröffentlichen oder Entscheidungen treffen.

Ähnliche Prompts