Intégration Astro (beta)
Traduisez votre site Astro en plus de 110 langues
Le SDK Astro Universally traduit votre site depuis votre code. Un arbre de pages sert chaque langue sous sa propre URL sur votre propre domaine.
Comment Universally fonctionne avec Astro
Ajoutez des traductions à votre projet Astro en quatre étapes.
1. Installer le package
Exécutez npm install @universally-sdk/astro dans votre projet. pnpm, yarn et bun fonctionnent aussi.
2. Ajouter votre clé API
Ajoutez UNIVERSALLY_API_KEY à votre fichier .env. Gardez-le côté serveur et jamais dans le code client.
3. Ajouter l'intégration
Ajoutez universally() aux intégrations dans astro.config.mjs et définissez votre URL site.
4. Traduisez vos pages
Utilisez t() pour les chaînes de caractères et href() pour les liens, et ajoutez <UniversallyHead /> à votre layout. Chaque langue est servie à l'adresse /<lang>/.
Fonctionnalités puissantes pour les sites Astro multilingues
Tout ce dont vous avez besoin pour publier votre site Astro dans toutes les langues, à partir de la même base de code.
Traduction par IA
Traduction automatique par IA
Chaque chaîne de caractères que vous passez à t() est traduite par une IA qui tient compte de son contexte.
- Traduction IA contextuelle
- Plus de 110 langues
- Modifier les chaînes dans le tableau de bord
Optimisation SEO
Une URL réelle pour chaque langue
Chaque langue est servie sous son propre préfixe /{lang}/ sur votre propre domaine. <UniversallyHead /> ajoute un lien hreflang par langue plus x-default, afin que les moteurs de recherche puissent trouver chaque version.
- URLs de langue comme /fr/
- Hreflang pour chaque langue
- x-default inclus
SDK développeur
Conçu pour les développeurs Astro
Le SDK s'intègre à Astro en tant qu'intégration. Vous encapsulez les chaînes de caractères dans t() et les liens dans href(), et Astro rend chaque langue à partir du même arbre de pages.
- Astro 5 et versions ultérieures
- Builds SSR et statiques
- Package sous licence MIT
Synchronisation du contenu
Nouvelles chaînes traduites automatiquement
Lorsque vous ajoutez ou modifiez une chaîne, le SDK la signale après l'envoi de la réponse et la traduit Universally. Tant que la traduction n'est pas prête, la page affiche le texte source.
- Chaînes manquantes signalées
- Traduit automatiquement
- Pas de retraduction manuelle
Performance
Aucun visiteur n'attend une traduction
t() est une recherche synchrone en mémoire, donc les pages s'affichent sans attendre une requête de traduction. Les modifications du tableau de bord parviennent à un serveur en cours d'exécution par interrogation ou par une poussée signée.
- Recherches de chaînes en mémoire
- Pas d'attente de traduction
- Modifications par interrogation ou poussée
Sécurité
Votre clé API reste sur le serveur
Le SDK lit UNIVERSALLY_API_KEY dans votre fichier .env sur le serveur, donc la clé n'est jamais envoyée au navigateur. Les poussées du tableau de bord vers votre site sont signées.
- Clé API côté serveur
- Poussée de revalidation signée
- Code open-source MIT
Derniers conseils et astuces
Prenez de l'avance avec des informations sur la traduction, des stratégies multilingues et des tutoriels de localisation Astro pour vous développer à l'échelle mondiale.
Prêt à rendre votre site Astro multilingue ?
Traduisez votre site Astro, servez chaque langue sur sa propre URL et atteignez des audiences mondiales avec la plateforme de traduction rapide et facile d'Universally.
Garantie de remboursement de 14 jours
Aucune carte de crédit requise
Annuler à tout moment
Questions fréquemment posées
Obtenez des réponses aux questions les plus courantes sur l'utilisation de Universally pour créer des sites Web multilingues qui convertissent réellement les visiteurs internationaux.
Quelles versions d'Astro et quels modes de sortie sont pris en charge ?
Le SDK nécessite Astro 5 ou une version ultérieure. Il fonctionne avec le rendu côté serveur, qui nécessite un adaptateur Astro tel que @astrojs/node, et avec les builds statiques.
Dans une build statique, la traduction se fait au moment de la build. Lorsque la build trouve des chaînes sans traduction, elle enregistre le nombre de nouvelles chaînes traduites et vous demande de reconstruire pour les inclure.
À quoi ressemble la configuration dans le code ?
Vous importez universally depuis @universally-sdk/astro et ajoutez universally() à la liste des intégrations dans astro.config.mjs. Vous définissez également l'option site sur votre URL de production et placez UNIVERSALLY_API_KEY dans votre fichier .env.
Dans vos pages, encapsulez le texte dans t() et les liens internes dans href(), et placez <UniversallyHead /> dans la tête de votre mise en page.
Universally ralentira-t-il mon site Astro ?
Non. t() est une recherche synchrone en mémoire, donc aucun visiteur n'attend une requête de traduction. Les chaînes sans traduction sont signalées après l'envoi de la réponse, et le premier rendu affiche le texte source.
Comment le SDK gère-t-il le SEO multilingue ?
Chaque langue obtient son propre préfixe d'URL /{lang}/ sur votre propre domaine. <UniversallyHead /> ajoute un <link rel="alternate" hreflang> par langue plus x-default. Les slugs d'URL eux-mêmes ne sont pas traduits.
Comment les modifications du tableau de bord parviennent-elles à mon site ?
Un serveur en cours d'exécution interroge les modifications, toutes les 60 secondes par défaut. Vous pouvez également envoyer une poussée signée à /_universally/revalidate afin que les modifications apparaissent immédiatement.
Une langue nouvellement ajoutée est l'exception : elle nécessite un redémarrage du serveur ou une reconstruction avant d'apparaître sur votre site.
Puis-je utiliser t() dans des îles côté client ?
Pas encore. t() s'exécute sur le serveur, alors traduisez les chaînes du composant Astro et transmettez-les à l'île en tant que props.
Quelle est la précision de la traduction par IA ?
L'IA est sensible au contexte, donc chaque chaîne est traduite en tenant compte du texte environnant. Vous pouvez modifier n'importe quelle chaîne dans le tableau de bord, et le glossaire et les règles de traduction basés sur l'IA verrouillent les noms de marque et les termes de l'industrie.
Puis-je utiliser le SDK avec des sous-domaines linguistiques Universally ?
Oui. Définissez universally({ mode: 'proxy' }) lorsque vos langues sont servies sur des sous-domaines linguistiques Universally. En mode proxy, le package ajoute uniquement les liens hreflang et le sélecteur de langue.