Next.js / Translation

Étape 15 de 25

Traduire automatiquement le contenu statique de l'interface utilisateur

Écrivez le texte statique normal dans les composants serveur. Altified détecte le texte sécurisé lors de la compilation de Next.js et le résout pour la langue sélectionnée par le proxy.

src/app/page.jsx
export default function WelcomePage() { return ( <main> <Hero Eyebrow="Nouvelles offres" title="Bienvenue sur notre site web" description="Découvrez nos derniers produits" /> <input placeholder="Rechercher toutes les offres..." aria-label="Rechercher les offres" /> <img src="/logo.png" alt="Logo Altified" /> </main> ); }

Aucune importation de traduction n'est requise pour les copies statiques ordinaires dans les composants serveur. Altified enregistre la copie, la résout pour la langue actuelle et revient au texte original si une traduction ou le service est indisponible.

  • Le texte JSX littéral se traduit dans n'importe quelle balise, y compris les titres, les paragraphes, les boutons et les balises span.
  • Les propriétés de texte communes des composants personnalisés sont traduites, notamment le titre, la description, l'étiquette, le sourcil, le sous-titre, la légende, l'espace réservé et l'attribut aria-label.
  • Les attributs Safe DOM se traduisent dans les composants serveur : alt, title, aria-label et placeholder.
  • Les métadonnées statiques et les titres du navigateur sont gérés par l'intégration des métadonnées lors de l'étape SEO.
  • Consultez chaque itinéraire de localisation configuré pour enregistrer et résoudre les copies nouvellement découvertes.

Altified évite délibérément les valeurs susceptibles de perturber le fonctionnement d'une application si elles sont traduites : href, src, id, className, data-*, les paramètres de route, les slugs et les expressions d'exécution telles que {product.name}.

Composants clients

Fichiers avec "use client" sont également réécrites automatiquement, en utilisant la sécurité du navigateur @altified/next/auto point d'entrée. Vous pouvez toujours utiliser AltifiedClientProvider précharger les traductions depuis le serveur lorsque les en-têtes, les navigations ou les menus doivent rester côté client.