Dynamische Inhalte übersetzen

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() fasst mehrere Zeichenketten zu einer Anfrage zusammen und gibt die Werte anhand des Schlüssels indiziert zurück. altified.t() wenn nur eine explizite Zeichenkette benötigt wird.

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

Statische Überschriften um dynamische Inhalte können im normalen JSX-Format bleiben und die automatische Übersetzung nutzen. Dadurch kann jede Seite automatisch kopierte Benutzeroberflächeninhalte mit explizit übersetzten Datensätzen kombinieren.