Translate dynamic content

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() batches several strings into one request and returns values indexed by key. Use altified.t() when only one explicit string is needed.

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

Static headings around dynamic content can remain ordinary literal JSX and use automatic translation. This lets each page combine automatic interface copy with explicitly translated records.