Traduzir conteúdo dinâmico

import { altified } from "@/lib/altified";

export default async function ProductPage({ product, locale }) {
  const keys = {
    name: `product.${product.id}.name`,
    description: `product.${product.id}.description`,
  };

  const copy = await altified.resolve(locale, [
    { key: keys.name, defaultValue: product.name },
    {
      key: keys.description,
      defaultValue: product.description,
      context: { type: "product", id: product.id },
    },
  ]);

  return (
    <main>
      <h1>{copy[keys.name]}</h1>
      <p>{copy[keys.description]}</p>
      <span>{product.price}</span>
    </main>
  );
}

altified.resolve() Agrupa várias strings num único pedido e retorna valores indexados por chave. Use altified.t() quando apenas é necessária uma string explícita.

• Build keys from stable record IDs, never array positions.
• Send only human-readable fields.
• Keep prices, IDs, SKUs, URLs, timestamps, and user input out of translation requests.
• Always provide original source-language content as defaultValue.
• Add context when it helps translators understand the string.

Os títulos estáticos em torno de conteúdo dinâmico podem permanecer como JSX literal comum e utilizar tradução automática. Isto permite que cada página combine o texto automático da interface com os registos traduzidos explicitamente.