Veröffentlichen Sie den Sprachumschalter

Offen Sprachumschalter im Projekt-Dashboard. Aktivieren Sie die Funktion, wählen Sie die verfügbaren Sprachen aus, ordnen Sie sie an, konfigurieren Sie die Beschriftungen und die mobile Darstellung und veröffentlichen Sie anschließend die Konfiguration.

• Legen Sie die Quellsprache des Projekts als Routing-Standard fest.
• Wählen Sie aus, ob das Standardgebietsschema in der URL ausgeblendet werden soll.
• Aktivieren Sie nur die für Besucher geeigneten Sprachen.
• Entscheiden Sie, ob der aktuelle Pfad durch Umschalten beibehalten werden soll.
• Vorschau des Switchers, dann veröffentlichen.

Der Initialisierer erstellt einen Altified-Proxy sowie einen Root-Next.js-Routing-Wrapper. Der Proxy liest die veröffentlichte Konfiguration und leitet Anfragen mit Gebietsschema-Präfix an Ihre bestehenden App-Router-Seiten weiter. und sendet das ausgewählte Gebietsschema an die Serverkomponenten im x-altified-locale Anfrageheader.

import { createAltifiedProxy } from "@altified/next/proxy";

export const proxy = createAltifiedProxy({
  projectId: process.env.ALTIFIED_PROJECT_ID,
});

Next.js 16 nennt diese Funktion Proxy. Das SDK erstellt außerdem das Stammverzeichnis. middleware.js Der unten gezeigte Wrapper dient der aktuellen Kompatibilität; bitte lassen Sie beide generierten Dateien an ihrem Platz.

import { proxy } from "./src/proxy";

export default proxy;

export const config = {
  matcher: ["/((?!api|_next/static|_next/image|favicon.ico|.*\..*).*)"],
};

Sie müssen die Anwendung nicht in einen app/[locale] Verzeichnis. Eine Route wie zum Beispiel /fr/products/25 wird intern durch die bestehende /products/25 Seite.

Der Initialisierer fügt den Umschalter niemals in Ihr Layout ein. Fügen Sie ihn genau dort ein, wo Sie ihn haben möchten, normalerweise im Header oder in der Navigation. Die Optionen öffnen sich direkt unterhalb dieses Steuerelements auf Desktop- und Mobilgeräten:

import { AltifiedLanguageSwitcher } from "@altified/next/switcher";

<AltifiedLanguageSwitcher
  projectId={process.env.ALTIFIED_PROJECT_ID}
  apiUrl={process.env.ALTIFIED_API_URL}
/>

Nachdem ein Besucher eine Sprache ausgewählt hat, behält der Proxy diese Sprache bei, während er normalen internen Links folgt. Zum Beispiel aus dem Französischen ein Next.js-Link zu /terms wird /fr/termsSie müssen nicht jeden Code neu schreiben. Link href.