So machen Sie eine bestehende Next.js-Anwendung nachträglich mehrsprachig (i18n-Leitfaden 2026)

Internationalisierung (i18n) vom ersten Tag an in ein Next.js-Projekt zu integrieren, ist relativ einfach. Doch was passiert, wenn Sie bereits eine ausgereifte, produktive Next.js-Anwendung in einer einzigen Sprache haben und diese nachträglich mehrsprachig machen müssen?

Wer dies schon einmal mit traditionellen Bibliotheken wie next-intl oder next-i18next versucht hat, kennt den Albtraum:

• Manuelle Suche nach fest kodierten Texten in Hunderten von JSX/TSX-Dateien.
• Erstellen verschachtelter JSON-Dateien und Erfinden willkürlicher Übersetzungsschlüssel (pages.dashboard.header.title usw.).
• Ersetzen von Text durch Hook-Aufrufe (t('...')).
• Umstrukturieren des gesamten app/-Ordners in app/[locale]/..., was bestehende Routen, Lesezeichen und Suchmaschinen-Indexierungen beschädigt.

Im Jahr 2026 müssen Sie Ihre Codebasis nicht neu schreiben. Mit Intlayer rüsten Sie eine bestehende Next.js-App in wenigen Minuten mit automatisierter Extraktion, KI-Übersetzung und flexiblem Routing nach.

Suchen Sie die vollständige, schrittweise technische Anleitung für Next.js 16 App Router? Besuchen Sie unsere Dokumentation: Next.js 16 mit Intlayer übersetzen.

Inhaltsverzeichnis

Das Nachrüstungs-Dilemma: Warum die Internationalisierung bestehender Apps schwierig ist

Entwickler stehen bei bestehenden Next.js-Apps vor drei großen Herausforderungen:

1. Codebasis-Unterbrechung: Das manuelle Extrahieren von Zeichenketten in JSON-Wörterbücher erfordert Änderungen an fast jeder Komponentendatei.
2. Routing-Zwang: Herkömmliche i18n-Bibliotheken zwingen Sie dazu, Seiten in ein dynamisches [locale]-Segment zu verschieben (z. B. /app/[locale]/page.tsx).
3. Mühsame Übersetzungsarbeit: Das Übersetzen extrahierter Wörterbücher in 5, 10 oder 20 Sprachen erfordert ständiges Kopieren und Einfügen.

Intlayer löst diese Probleme architektonisch durch Compiler-gestützte Extraktion, deklarative Wörterbücher und flexibles Routing.

Automatisierte Inhaltsextraktion (Keine manuelle Textsuche)

Option A: Der CLI-Extraktor (npx intlayer extract)

Führen Sie das Extraktions-Tool von Intlayer direkt in Ihrem Code aus:

npx intlayer extract

Dieser Befehl analysiert Ihre React-Komponenten, extrahiert Texte und erstellt automatisch deklarative Inhaltsdateien (.content.ts) direkt neben Ihren Komponenten.

Option B: Der Intlayer-Compiler (Build-Time-Extraktion)

Mit aktiviertem Intlayer-Compiler schreiben Sie Ihre Komponenten einfach mit reinem Text in Ihrer Standardsprache weiter. Beim Build extrahiert der Compiler den Text und bindet die lokalisierten Inhalte automatisch ein:

// Write normal React code. The compiler extracts the text automatically
export default function HomePage() {
  return (
    <section>
      <h1>Welcome to our platform</h1>
      <p>Start exploring our modern features today.</p>
    </section>
  );
}

Hinter den Kulissen erstellt Intlayer das Wörterbuch und verknüpft die Komponente mit ihren lokalisierten Inhalten, wodurch manuelles Refactoring vollständig entfällt.

In diesem Fall wird eine Datei src/app/page.content.ts mit folgendem Inhalt generiert:

import { Dictionary } from "intlayer";

const content = {
  key: "home-page",
  content: {
    welcomeToOurPlatform: t({ en: "Welcome to our platform" }),
    startExploringOurModernFeaturesToday: t({
      en: "Start exploring our modern features today.",
    }),
  },
};

export default content;

KI-gestützte Übersetzung mit Ihrem bevorzugten LLM

Nach der Extraktion übersetzt die integrierte KI-CLI von Intlayer Ihre Inhalte blitzschnell mit OpenAI, Anthropic, DeepSeek oder Mistral über Ihre eigenen API-Schlüssel:

npx intlayer fill

import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH, Locales.GERMAN],
    defaultLocale: Locales.ENGLISH,
  },
  ai: {
    provider: "openai",
    model: "gpt-4o-mini",
    apiKey: process.env.OPENAI_API_KEY,
    applicationContext:
      "SaaS-Dashboard für Produktivität und Teamzusammenarbeit",
  },
};

export default config;

Das Ausführen von npx intlayer fill füllt Ihre .content.ts-Deklarationen mit Übersetzungen für alle konfigurierten Sprachen:

import { Dictionary } from "intlayer";

const content = {
  key: "home-page",
  content: {
    welcomeToOurPlatform: t({
      en: "Welcome to our platform",
      fr: "Bienvenue sur notre plateforme",
      es: "Bienvenido a nuestra plataforma",
      de: "Willkommen auf unserer Plattform",
    }),
    startExploringOurModernFeaturesToday: t({
      en: "Start exploring our modern features today.",
      fr: "Découvrez nos fonctionnalités modernes dès aujourd'hui.",
      es: "Comience a explorar nuestras funciones modernas hoy.",
      de: "Entdecken Sie noch heute unsere modernen Funktionen.",
    }),
  },
};

export default content;

Da Intlayer dem LLM einen übergeordneten applicationContext bereitstellt, behalten generierte Übersetzungen technische Nuancen, Markenstimme und grammatikalischen Kontext deutlich besser bei als herkömmliche Automatisierungswerkzeuge.

Um vor dem Release in Produktion zu prüfen, dass keine Texte übersehen wurden:

npx intlayer test

Mehrsprachiges Routing ohne Beschädigung bestehender URLs

Intlayer bietet flexible Routing-Strategien:

• Suchparameter / Cookie-Modus (search-params): Behalten Sie Ihre Verzeichnisstruktur (/app/page.tsx) ohne Verschieben in [locale] bei.
• Präfix-Modus (prefix / prefix-all-locales): Sobald Sie für suchmaschinenoptimierte URLs bereit sind, unterstützt Intlayer Pfad-Routing über einen einfachen Next.js-Proxy.

Konfigurieren Sie Ihre Next.js-Integration in Sekundenschnelle:

import type { NextConfig } from "next";
import { withIntlayer } from "next-intlayer/server";

const nextConfig: NextConfig = {/* Your existing Next.js config */};

export default withIntlayer(nextConfig);

Ummanteln Sie Ihr Root-Layout mit IntlayerProvider:

import type { ReactNode } from "react";
import { IntlayerProvider } from "next-intlayer";
import { getLocale } from "next-intlayer/server";
import { getHTMLTextDir } from "intlayer";

export default async function RootLayout({
  children,
}: {
  children: ReactNode;
}) {
  const locale = await getLocale();

  return (
    <html lang={locale} dir={getHTMLTextDir(locale)}>
      <body>
        <IntlayerProvider defaultLocale={locale}>{children}</IntlayerProvider>
      </body>
    </html>
  );
}

Mehrsprachiges SEO

Generieren Sie lokalisierte Metadaten und hreflang-Tags für globales SEO:

import type { Metadata } from "next";
import { getLocale } from "next-intlayer/server";
import { getIntlayer } from "intlayer";

export const generateMetadata = async (): Promise<Metadata> => {
  const locale = await getLocale();
  const content = getIntlayer("home-page-metadata", locale);

  return {
    title: content.title,
    description: content.description,
  };
};

Vertiefung: Bereit für die schrittweise Implementierung?

Dieser Leitfaden gibt einen Überblick über die nachträgliche Internationalisierung einer Next.js-App im Jahr 2026. Für die vollständige schrittweise Anleitung besuchen Sie unsere Dokumentation:

👉 Vollständiger Leitfaden zur Übersetzung von Next.js 16 mit Intlayer

Häufig gestellte Fragen (FAQ)