So übersetzen Sie eine Next.js-Website: i18n und No-Code

Fassen Sie diesen Beitrag zusammen mit: 9 Minuten Lesezeit

Es gibt zwei Möglichkeiten, eine Next.js-Website zu übersetzen. Die Coderoute: jede Route unter ein setzen app/[lang] Segment, erkennen Sie die Sprache des Besuchers in proxy.jsLaden Sie ein Übersetzungswörterbuch pro Gebietsschema und geben Sie hreflang-Tags mit dem aus alternates Metadatenfeld. Die Route ohne Code: Fügen Sie Ihrem Stammlayout das Skript eines Übersetzungsdienstes hinzu und lassen Sie es die gerenderten Seiten übersetzen, wobei übersetzte URLs aus einem Unterverzeichnis oder einer Unterdomäne für SEO bereitgestellt werden.

Die Coderoute gibt Ihnen die volle Kontrolle und funktioniert am besten, wenn der Text in Ihrer Codebasis lebt und ein Entwickler ihn pflegt. Der No-Code-Weg ist schneller, wenn der Text aus einem CMS stammt, wenn Nicht-Entwickler Übersetzungen bearbeiten müssen oder wenn Sie viele Sprachen gleichzeitig benötigen. Dieser Leitfaden zeigt beides, basierend auf der Next.js 16-Dokumentation, und endet mit einer Checkliste für mehrsprachige SEO in beiden Fällen.

Wichtige Erkenntnisse

App-Router: Nestseiten unter app/[lang], Weiterleitung in proxy.js (angerufen middleware.js vor Next.js 16), laden Sie JSON-Wörterbücher in Serverkomponenten und prerendern Sie lokale Dateien mit generateStaticParams.
Seitenrouter: Verwenden Sie die eingebaute i18n Konfiguration in next.config.js. Es funktioniert nicht mit output: 'export'.
Next.js fügt hreflang nicht für Sie hinzu. Verwenden Sie im App Router alternates.languages In generateMetadata.
Die No-Code-Option ist eine <Script> Tag in app/layout.tsx. Verwenden Sie für indexierbare übersetzte Seiten ein Unterverzeichnis oder eine Unterdomäneneinrichtung, anstatt die Übersetzung nur im Browser durchzuführen.
Welche Route Sie auch wählen, legen Sie fest <html lang>, übersetzen Sie Titel und Beschreibungen und verknüpfen Sie jede Sprachversion mit hreflang.

Option 1: Internationalisieren Sie Next.js mit dem App Router

Daraus folgt die Offizieller Next.js-Internationalisierungsleitfaden (Version 16.3 zum Zeitpunkt des Verfassens dieses Artikels).

Schritt 1: Ordnen Sie Ihre Routen einem Sprachsegment zu

Verschieben Sie Ihre Seiten und Layouts in app/[lang]/. Jede Seite erhält dann das Gebietsschema als Routenparameter:

// app/[lang]/page.tsx
export default async function Page({ params }: PageProps<'/[lang]'>) {
  const { lang } = await params;
  return <h1>{lang}</h1>;
}

Routing kann einen Unterpfad verwenden (/fr/products) oder eine Domäne (my-site.fr/products). Der Unterpfad ist einfacher zu hosten und behält alle Sprachen auf einer Domäne.

Schritt 2: Erkennen Sie die Sprache und leiten Sie in proxy.js um

In Next.js 16 die middleware Die Dateikonvention wurde umbenannt in proxy (es gibt einen Codemod: npx @next/codemod@canary middleware-to-proxy .). Der Proxy prüft, ob die URL bereits über ein Gebietsschema verfügt und leitet, falls nicht, weiter:

// proxy.js
import { NextResponse } from 'next/server';

const locales = ['en', 'fr', 'de'];

function getLocale(request) {
  // Read Accept-Language, e.g. with @formatjs/intl-localematcher and negotiator
  return 'en';
}

export function proxy(request) {
  const { pathname } = request.nextUrl;
  const hasLocale = locales.some((l) => pathname.startsWith(`/${l}/`) || pathname === `/${l}`);
  if (hasLocale) return;

  request.nextUrl.pathname = `/${getLocale(request)}${pathname}`;
  return NextResponse.redirect(request.nextUrl);
}

export const config = {
  matcher: ['/((?!_next).*)'],
};

Seien Sie vorsichtig mit automatischen Weiterleitungen. Googles Leitlinien für mehrsprachige Websites empfiehlt, Benutzern die Wahl zu lassen: “Erwägen Sie das Hinzufügen von Hyperlinks zu anderen Sprachversionen einer Seite.” Leiten Sie nur um, wenn die URL kein Gebietsschema hat, niemals von einem Gebietsschema weg, nach dem der Besucher (oder Googlebot) gefragt hat, und zeigen Sie immer ein Sprachumschalter an.

Schritt 3: Laden Sie ein Wörterbuch pro Sprache

Behalten Sie eine JSON-Datei pro Sprache und laden Sie sie auf den Server:

// app/[lang]/dictionaries.ts
import 'server-only';

const dictionaries = {
  en: () => import('./dictionaries/en.json').then((m) => m.default),
  fr: () => import('./dictionaries/fr.json').then((m) => m.default),
};

export type Locale = keyof typeof dictionaries;
export const hasLocale = (l: string): l is Locale => l in dictionaries;
export const getDictionary = async (l: Locale) => dictionaries[l]();

// app/[lang]/page.tsx
import { notFound } from 'next/navigation';
import { getDictionary, hasLocale } from './dictionaries';

export default async function Page({ params }: PageProps<'/[lang]'>) {
  const { lang } = await params;
  if (!hasLocale(lang)) notFound();
  const dict = await getDictionary(lang);
  return <button>{dict.products.cart}</button>;
}

Da App-Router-Seiten standardmäßig Serverkomponenten sind, werden die Wörterbücher nicht an den Browser gesendet. Die Dokumente beschreiben auch next/root-params, wodurch jede Serverkomponente lesen kann lang ohne es durch Requisiten weiterzugeben.

Schritt 4: Rendern Sie jede Sprache vor und legen Sie das HTML-Lang-Attribut fest

// app/[lang]/layout.tsx
export async function generateStaticParams() {
  return [{ lang: 'en' }, { lang: 'fr' }, { lang: 'de' }];
}

export default async function RootLayout({ children, params }: LayoutProps<'/[lang]'>) {
  return (
    <html lang={(await params).lang}>
      <body>{children}</body>
    </html>
  );
}

Schritt 5: Fügen Sie hreflang- und kanonische Tags hinzu

Next.js weiß nicht, welche Seiten Übersetzungen voneinander sind, also deklarieren Sie es. Mit der Metadaten-API, alternates Gibt sowohl die kanonischen als auch die hreflang-Links aus:

// app/[lang]/pricing/page.tsx
export async function generateMetadata({ params }) {
  const { lang } = await params;
  return {
    alternates: {
      canonical: `https://example.com/${lang}/pricing`,
      languages: {
        en: 'https://example.com/en/pricing',
        fr: 'https://example.com/fr/pricing',
        de: 'https://example.com/de/pricing',
        'x-default': 'https://example.com/en/pricing',
      },
    },
  };
}

Jede Sprachversion sollte alle Versionen auflisten, einschließlich sich selbst. Unser Artikel über selbstreferenzielle hreflang-Tags erklärt, warum das wichtig ist.

Bibliotheken, die die schwere Arbeit erledigen

Die Next.js-Dokumente listen mehrere Bibliotheken für Routing und Übersetzung auf, darunter next-intl, next-international, next-i18n-router, paraglide-next, lingui „ tolgee. Sie fügen Pluralisierung, Zahlen- und Datumsformatierung sowie typsichere Nachrichtenschlüssel hinzu. Wählen Sie für alles, was über eine kleine Website hinausgeht, eine aus, anstatt Ihre eigene zu schreiben.

Option 1b: Der Pages Router

Wenn Ihr Projekt noch die verwendet pages/ Verzeichnis, Next.js verfügt seit Version 10 über integriertes i18n-Routing. Fügen Sie die Standorte hinzu zu next.config.js:

module.exports = {
  i18n: {
    locales: ['en-US', 'fr', 'de'],
    defaultLocale: 'en-US',
  },
};

Das gibt dir /fr/blog „ /de/blog automatisch und setzt <html lang>. Laut der Seiten Router-Anleitung, zwei Grenzen sind wichtig: Sie fügen immer noch selbst hreflang hinzu (mit next/head) und “Internationalisiertes Routing lässt sich nicht integrieren in output: 'export'”. Statische Exporte erfordern den App Router-Ansatz oder ein anderes Setup.

Was Sie die Coderoute kostet

Die Coderoute ist die richtige Wahl für eine Produkt-Benutzeroberfläche, deren Zeichenfolgen in Komponenten enthalten sind. Für alles andere wird es teuer:

Inhalte außerhalb Ihres Codes (ein Headless-CMS, Produkt-Feeds, benutzergenerierte Inhalte) benötigt eine eigene Übersetzungspipeline.
Jede neue Zeichenfolge benötigt vor der Veröffentlichung einen Schlüssel und eine Übersetzung in jeder Sprache.
Nicht-Entwickler können eine Übersetzung nicht reparieren ohne Pull Request, es sei denn, Sie fügen ein Übersetzungsverwaltungstool hinzu.
Mehr Sprachen bedeuten mehr Dateien synchron zu bleiben.

Option 2: Übersetzen Sie eine Next.js-Site, ohne Ihren Code zu ändern

Ein Website-Übersetzungsdienst wie ConveyThis übersetzt das HTML, das Ihre Next.js-App rendert, sodass Sie keine Wörterbücher erstellen oder Routen ändern.

Schritt 1: Erstellen Sie ein Konto und fügen Sie Ihre Domain hinzu

Erstellen Sie ein ConveyThis-KontoFügen Sie Ihre Domain hinzu und wählen Sie Ihre Quell- und Zielsprachen aus.

Schritt 2: Fügen Sie das Skript zu Ihrem Stammlayout hinzu

ConveyThis gibt Ihnen eine Skript-URL mit Ihrem API-Schlüssel. Fügen Sie es im App Router einmal hinzu app/layout.tsx mit next/script:

// app/layout.tsx
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://cdn.conveythis.com/javascript/conveythis.js?api_key=YOUR_API_KEY"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Das Widget achtet auf Seitenänderungen und clientseitige Navigation, sodass auch Inhalte übersetzt werden, die React nach dem ersten Laden rendert, sowie Routen, die sich ohne vollständiges Neuladen ändern. Es legt auch die Seiten fest lang Attribut zur angezeigten Sprache. Die allgemeinen Schritte sind die gleichen wie in unserem Hilfeartikel zur React-Übersetzung und die JavaScript Integrationsleitfaden.

Schritt 3: Wählen Sie eine SEO-freundliche URL-Struktur

Für Besucher reicht ein Skript aus, das Text im Browser austauscht, Suchmaschinen benötigen jedoch für jede Sprache eine separate URL, um ihn zu indizieren. Wählen Sie im Dashboard ConveyThis Unterdomäne (fr.example.com) oder Unterverzeichnis (example.com/fr/) unter URL-Struktur. Übersetzte Seiten werden dann auf ihren eigenen URLs bereitgestellt, wobei hreflang-Tags hinzugefügt werden. Bei einer benutzerdefinierten Site ist die Subdomäne normalerweise die einfachere Wahl: Ihr Next.js-Host bedient weiterhin die Hauptdomäne und Sie fügen einen CNAME-Datensatz pro Sprache hinzu, während das Unterverzeichnis bedeutet, dass die gesamte Domäne über ConveyThis geleitet wird. Beide Optionen stehen auf dem Businessplan und höher; die Hilfeartikel zu Unterdomänen vs. Unterverzeichnissen erklärt die DNS-Einträge, die jeder benötigt. Wenn Ihre Domain bereits auf Cloudflare ist, Einrichtung von Cloudflare Workers (O2O) hält Ihre Zone an Ort und Stelle.

Schritt 4: Überprüfen und verfeinern Sie die Übersetzungen

Durch maschinelle Übersetzung erhalten Sie in wenigen Minuten eine vollständige erste Version. Verwenden Sie dann den visuellen Editor, um den Wortlaut im Kontext anzupassen, Markenbegriffe zum Glossar hinzuzufügen und einen Übersetzer oder Kollegen mit Teamrollen einzuladen. Die vollständige Liste finden Sie auf der Features-Seite.

Code-Route oder No-Code-Route?

	App Router i18n (Code)	ConveyThis (kein Code)
Einrichtung	Routen neu strukturieren, Proxy, Wörterbücher, Metadaten hinzufügen	Ein Skript-Tag plus DNS für SEO-URLs
Woher der Text kommt	Ihre Wörterbücher	Was auch immer die Seite rendert, einschließlich CMS-Inhalte
Wer bearbeitet Übersetzungen	Entwickler (oder ein TMS)	Jeder mit Dashboard-Zugriff
hreflang	Sie fügen es hinzu mit `alternates`	Hinzugefügt mit Unterverzeichnis- oder Unterdomänen-URLs
Am besten für	App-UI-Strings, volle Kontrolle	Marketing-Sites, CMS-Inhalte, viele Sprachen
Kosten	Entwicklerzeit	Plan basierend auf Wörtern und Sprachen (Preise)

Viele Teams kombinieren sie: codebasiertes i18n für die angemeldete App, einen Übersetzungsdienst für die Marketingseite und ein Hilfecenter.

Mehrsprachige SEO-Checkliste für Next.js

Eine URL pro Sprache (/fr/… oder fr.example.com), niemals für jede Sprache die gleiche URL.
<html lang> entspricht der Sprache der Seite.
Titel und Metabeschreibung für jede Sprache übersetzt.
Canonical verweist auf jeder übersetzten Seite auf sich selbst, nicht auf die englische Seite.
Hreflang listet jede Sprachversion auf, einschließlich der Seite selbst, plus x-default.
Die Sitemap enthält alle Sprach-URLs.
Ein sichtbares Sprachumschalter mit echten Links, nicht nur ein Dropdown, der den Status ändert.
Keine erzwungenen Weiterleitungen weg von der Sprache, die ein Besucher angefordert hat.

Für das Gesamtbild lesen Sie unsere Mehrsprachige SEO-Übersicht.

Häufig gestellte Fragen

Verfügt Next.js über eine integrierte Übersetzung? Es ist international integriert Routing im Pages Router und dokumentierte i18n-Muster für den App Router. Der übersetzte Text selbst stammt aus Ihren Wörterbüchern, einer Bibliothek oder einem Übersetzungsdienst.

Was ist mit middleware.js passiert? In Next.js 16 middleware Die Dateikonvention wurde verworfen und umbenannt in proxy. Die Logik für die Gebietsschematerkennung ist dieselbe.

Fügt Next.js automatisch hreflang-Tags hinzu? Nein. Verwenden alternates.languages in den Metadaten des App-Routers oder next/head im Pages Router.

Kann ich eine statisch exportierte Next.js-Site übersetzen? Das Routing des Seitenrouters i18n funktioniert nicht mit output: 'export', und Proxy wird für statische Exporte nicht unterstützt. Vorgenerierte verwenden [lang] Routen oder ein Übersetzungsdienst, der übersetzte Seiten aus seinem eigenen Unterverzeichnis oder seiner eigenen Unterdomäne bereitstellt.

Möchten Sie Ihre Next.js-Site diese Woche statt im nächsten Quartal in mehreren Sprachen? Erstellen Sie ein ConveyThis-KontoFügen Sie das Skript zu Ihrem Stammlayout hinzu und wählen Sie die URL-Struktur aus, die zu Ihrem SEO-Plan passt.