Publique o seletor de idioma.

Aberto Seletor de idiomas no painel de controlo do projeto. Ative a opção, escolha os idiomas disponíveis, ordene-os, configure os rótulos e a apresentação para dispositivos móveis e, em seguida, publique a configuração.

• 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.

O inicializador cria um proxy Altified mais um wrapper de encaminhamento raiz do Next.js. O proxy lê a configuração publicada e reescreve os pedidos com prefixo de localidade para as páginas existentes do seu router de aplicações. e envia a localidade selecionada para os componentes do servidor no x-altified-locale cabeçalho da solicitação.

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

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

O Next.js 16 chama a esta funcionalidade Proxy. O SDK também cria o diretório raiz. middleware.js O invólucro mostrado abaixo é para compatibilidade atual, por isso mantenha ambos os ficheiros gerados no local correto.

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

export default proxy;

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

Não precisa de mover o aplicativo para um app/[locale] diretório. Uma rota como /fr/products/25 é servido internamente pelo existente /products/25 página.

O inicializador nunca insere o selector no seu layout. Adicione-o exatamente onde pretende, normalmente dentro do cabeçalho ou da navegação. As opções são abertas diretamente abaixo deste controlo, tanto na versão desktop como na versão mobile:

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

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

Depois de um visitante selecionar um idioma, o proxy mantém essa configuração regional enquanto segue os links internos normais. Por exemplo, a partir do francês, é apresentado um link Next.js para /terms torna-se /fr/termsNão precisa de reescrever tudo Link href.