Pubblica il selettore di lingua

Aprire Selettore di lingua nella dashboard del progetto. Attivalo, scegli le lingue disponibili, ordinale, configura le etichette e la visualizzazione su dispositivi mobili, quindi pubblica la configurazione.

• Make the project source language the routing default.
• Choose whether the default locale is hidden from the URL.
• Enable only languages ready for visitors.
• Choose whether switching preserves the current path.
• Preview the switcher, then publish.

L'inizializzatore crea un proxy Altified più un wrapper di routing Next.js radice. Il proxy legge la configurazione pubblicata, riscrive le richieste con prefisso locale alle pagine App Router esistenti, e invia le impostazioni locali selezionate ai componenti del server nel x-altified-locale intestazione della richiesta.

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

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

Next.js 16 chiama questa funzionalità Proxy. L'SDK crea anche la radice middleware.js Il wrapper mostrato di seguito è compatibile con le versioni attuali, quindi si consiglia di conservare entrambi i file generati nella stessa posizione.

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

export default proxy;

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

Non è necessario spostare l'applicazione in un app/[locale] directory. Un percorso come /fr/products/25 è servito internamente dall'esistente /products/25 pagina.

L'inizializzatore non inserisce mai lo switcher nel layout. Aggiungilo esattamente dove desideri, di solito all'interno dell'intestazione o della navigazione. Le relative opzioni si aprono direttamente sotto quel controllo, sia su desktop che su dispositivi mobili:

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

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

Dopo che un visitatore ha selezionato una lingua, il proxy mantiene tale impostazione locale mentre l'utente segue i normali link interni. Ad esempio, dal francese, un collegamento Next.js a /terms diventa /fr/terms; non è necessario riscrivere ogni Link Referenza.