Idiomas e textos

Instalação e configuração

Antes de qualquer etapa, leia Antes de começar e Noções básicas sobre terminal. Estas instruções presumem que você abriu o monorepo supastack completo no VS Code; sua raiz package.json marca a raiz do repositório. Nos comandos pnpm, um pacote de espaço de trabalho é um aplicativo ou uma pasta de código compartilhado; no produto, um espaço de trabalho é o contêiner de dados e o limite de segurança de uma equipe. corepack pnpm --filter ... seleciona um pacote do monorepo enquanto os comandos são executados a partir de sua raiz. Se você abriu apenas uma pasta móvel ou desktop sincronizada, ela não contém o back-end da Web, a configuração do Docker ou os scripts raiz: execute o back-end deste monorepo ou de um servidor hospedado acessível e use os próprios scripts da pasta da plataforma. Uma variável de ambiente é uma configuração nomeada armazenada em um arquivo .env local ou no painel de hospedagem; reinicie o aplicativo relevante após alterá-lo e mantenha os segredos do servidor fora dos valores NEXT_PUBLIC_ e EXPO_PUBLIC_.

1. Abra packages/i18n/src/index.ts no VS Code para ver os nomes de idiomas suportados e auxiliares de localidade; localize os arquivos de dicionário correspondentes antes de alterar a cópia do produto.

2. Adicione a mesma nova chave e tradução aos dicionários de inglês, alemão, espanhol e francês.

3. Na raiz do repositório, execute corepack pnpm test -- packages/i18n/src/index.test.ts e inicie a Web com corepack pnpm --filter @supastack/web dev. Esperado: o seletor de idioma altera o texto visível enquanto preserva o caminho da página atual.

As localidades residem em @supastack/i18n com SUPPORTED_LOCALES, LOCALE_COOKIE, resolveLocale, getDictionary e localePath. O proxy define x-supastack-locale e lida com redirecionamentos canônicos em inglês; LanguageSwitcher atualiza o cookie e preserva os subcaminhos ativos. As principais rotas do aplicativo (/dashboard, /settings, /billing, /chat) funcionam diretamente nos prefixos /[locale] junto com a página inicial de marketing suave /{locale}.

Os dicionários cobrem navegação de marketing, rótulos de seção de configurações, cromo de configurações da organização, correio transacional (convite/OTP/magic-link/AI/faturamento), rótulos de preferência de notificação e cópia de evento de notificação no aplicativo.

import { getDictionary, resolveLocale, LOCALE_COOKIE } from "@supastack/i18n";

const locale = resolveLocale([
  cookieStore.get(LOCALE_COOKIE)?.value,
  headers.get("x-supastack-locale"),
  headers.get("accept-language"),
]);
const copy = getDictionary(locale);

Comandos para copiar

Siga os comentários para ver em qual pasta um comando é executado. Se dois terminais estiverem rotulados, abra duas janelas de terminal e mantenha o primeiro comando em execução enquanto usa o segundo.

corepack pnpm test -- packages/i18n/src/index.test.ts
corepack pnpm --filter @supastack/web dev

Fluxo de implementação

Passe a localidade nas configurações/páginas organizacionais renderizadas pelo servidor e nas opções de entrega de email de notificação/auth, quando disponíveis. Mantenha o inglês como DEFAULT_LOCALE e evite inventar afirmações de marketing fora das chaves do dicionário.

O correio transacional permanece separado da divulgação. Expande os dicionários antes de aninhar cada rota de marketing sob [locale].

Verificação e resolução de problemas

Se aparecer inglês para uma frase, verifique se a chave existe em todos os quatro dicionários e se a página solicita a mesma chave. Se a mudança de idioma retornar à página inicial, preserve o caminho atual ao criar o link de localidade. Mantenha a cópia do email no caminho do email transacional; não o reutilize como divulgação em massa.

Execute packages/i18n Vitest, testes de proxy e testes de rotas de aplicativos de localidade. Verifique o LanguageSwitcher em / e os títulos localizados de Configurações/org/dashboard/billing/chat quando o prefixo de localidade for de/es/fr.