Melhores práticas

A maneira mais rápida de obter traduções ruins é fazer o tempo de execução contornar problemas de estrutura de aplicativo evitáveis.

Use nomes de contexto reais

Boas chaves de contexto explicam onde o texto está localizado:

tsx
import { Ways } from '@18ways/react';
 
export function AppRoot() {
  return (
    <Ways apiKey="pk_dummy_demo_token" locale="en-GB" baseLocale="en-GB" context="app">
      <Ways context="checkout.payment-form">
        <PaymentForm />
      </Ways>
      <Ways context="dashboard.billing-history">
        <BillingHistory />
      </Ways>
      <Ways context="marketing.pricing-hero">
        <PricingHero />
      </Ways>
    </Ways>
  );
}

Evite baldes anônimos como page1, copy ou misc.

Traduzir pensamentos completos

Bom:

tsx
import { T } from '@18ways/react';
 
export function InvoiceLink() {
  return (
    <T>
      Download your latest invoice as <a href="/invoices/latest.pdf">PDF</a>
    </T>
  );
}

Evite:

18ways pode lidar com o caso de link comum como uma mensagem. <T><a href="#">Clique aqui</a> para ver mais</T> deve permanecer como uma frase em vez de ser dividida e costurada novamente.

tsx
import { T } from '@18ways/react';
 
export function InvoiceLink() {
  return (
    <>
      <T>Download</T> <T>your latest invoice</T> <T>as PDF</T>
    </>
  );
}

Mantenha a borda do pacote clara

  • Se você estiver no Next.js, use @18ways/next para resolução de localidade e metadados.
  • Se você está apenas no React, mantenha o estado de localidade em seu aplicativo e use @18ways/react.
  • Se você estiver fora do React, use @18ways/core e gerencie a integração da interface do usuário você mesmo.

Deixe o roteamento combinar com seu produto

Páginas de marketing públicas geralmente desejam roteamento de localidade baseado em caminho para SEO. Dashboards internos e rotas de ferramentas internas muitas vezes não desejam isso. É por isso que o site atual exclui /dashboard, /__design e /__email do roteamento por caminho.

Mantenha a cópia original humana

18ways funciona melhor quando o texto fonte é escrito como uma cópia de produto real, e não como uma chave de tradução comprimida.

Uma boa cópia de fonte fornece ao modelo um melhor contexto e oferece à sua equipe algo legível no código.

Melhores Práticas