Traduzir automaticamente o conteúdo estático da interface.

Escreva o conteúdo estático normal nos componentes do servidor. O Altified deteta o texto seguro durante a compilação do Next.js e resolve-o para a localidade selecionada pelo proxy.

src/app/page.jsx

export default function WelcomePage() { return ( <main> <Hero eyebrow="Novas ofertas" title="Bem-vindo ao nosso site" description="Veja os nossos produtos mais recentes" /> <input placeholder="Pesquisar todas as ofertas..." aria-label="Pesquisar ofertas" /> <img src="/logo.png" alt="Altified logo" /> </main> ); }

Não é necessária a importação de traduções para cópias estáticas comuns em componentes de servidor. Altified regista a cópia, resolve-a para a localidade atual e recorre ao texto original se uma tradução ou o serviço não estiverem disponíveis.

O texto literal JSX é traduzido em qualquer etiqueta, incluindo cabeçalhos, parágrafos, botões e elementos span.
Os atributos de texto comuns em componentes personalizados são traduzidos, incluindo título, descrição, etiqueta, subtítulo, legenda, espaço reservado e aria-label.
Os atributos DOM seguros são traduzidos em componentes de servidor: alt, title, aria-label e placeholder.
Os metadados estáticos e os títulos dos navegadores são tratados através da integração de metadados na etapa de SEO.
Aceda a cada rota de localidade configurada para registar e resolver a cópia recém-descoberta.

A Altified evita deliberadamente valores que possam causar problemas numa aplicação se forem traduzidos: href, src, id, className, data-*, parâmetros de rota, slugs e expressões de tempo de execução, como {product.name}.

Componentes do cliente

Arquivos com "use client" são também reescritas automaticamente, utilizando o formato seguro para os browsers. @altified/next/auto ponto de entrada. Pode ainda usar AltifiedClientProvider Para pré-carregar traduções do servidor quando os cabeçalhos, a navegação ou os menus precisam de permanecer do lado do cliente.