Traducir contenido 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 varias cadenas en una sola solicitud y devuelve valores indexados por clave. altified.t() cuando solo se necesita una cadena 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.

Los encabezados estáticos que rodean el contenido dinámico pueden seguir siendo código JSX literal y utilizar la traducción automática. Esto permite que cada página combine el texto de la interfaz automática con los registros traducidos explícitamente.