Publier le sélecteur de langue

Ouvrir sélecteur de langue dans le tableau de bord du projet. Activez-le, choisissez les langues disponibles, ordonnez-les, configurez les étiquettes et l'affichage mobile, puis publiez la configuration.

• 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'initialiseur crée un proxy Altified ainsi qu'un wrapper de routage racine Next.js. Le proxy lit la configuration publiée, réécrit les requêtes préfixées par des paramètres régionaux vers vos pages App Router existantes, et envoie les paramètres régionaux sélectionnés aux composants serveur dans le x-altified-locale En-tête de requête.

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

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

Next.js 16 nomme cette fonctionnalité Proxy. Le SDK crée également la racine. middleware.js Le fichier d'encapsulation ci-dessous assure la compatibilité actuelle ; veuillez donc conserver les deux fichiers générés.

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

export default proxy;

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

Vous n'avez pas besoin de déplacer l'application dans un app/[locale] répertoire. Une route telle que /fr/products/25 est desservi en interne par l'existant /products/25 page.

L'initialiseur n'insère jamais le sélecteur dans votre mise en page. Ajoutez-le précisément à l'endroit souhaité, généralement dans votre en-tête ou votre menu de navigation. Ses options s'affichent directement en dessous de ce contrôle sur ordinateur et mobile :

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

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

Une fois qu'un visiteur a sélectionné une langue, le proxy conserve cette langue pendant qu'il suit les liens internes habituels. Par exemple, depuis le français, un lien Next.js vers /terms devient /fr/terms; vous n'avez pas besoin de tout réécrire Link href.