Traduire du contenu dynamique

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() Regroupe plusieurs chaînes de caractères en une seule requête et renvoie les valeurs indexées par clé. altified.t() lorsqu'une seule chaîne de caractères explicite est nécessaire.

• 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.

Les titres statiques entourant le contenu dynamique peuvent rester du JSX littéral ordinaire et utiliser la traduction automatique. Cela permet à chaque page de combiner le texte automatique de l'interface avec les enregistrements traduits explicitement.