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.

• Erstellen Sie Schlüssel aus stabilen Datensatz-IDs, niemals aus Array-Positionen.
• Senden Sie nur für Menschen lesbare Felder.
• Preise, IDs, SKUs, URLs, Zeitstempel und Benutzereingaben dürfen nicht in Übersetzungsanfragen einbezogen werden.
• Verwenden Sie immer den Originalinhalt der Quellsprache als Standardwert.
• Fügen Sie Kontext hinzu, wenn dies den Übersetzern hilft, den Text zu verstehen.

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.