Configuration i18n

Configuration du comportement i18n dans votre application Next.js

Aperçu

La fonction withGTConfig() initialise les paramètres de traduction générale (GT) pour une application Next.js. En passant des props à cette fonction, nous pouvons contrôler le comportement d'internationalisation (i18n) de l'application. Cela inclut la définition de la locale par défaut (également appelée la langue de secours), des locales prises en charge, et d'autres options liées à la traduction.

Ajout du plugin

La première étape consiste à ajouter la fonction plugin withGTConfig() à votre fichier de configuration next.

Localisation de votre fichier de configuration next

Dans le répertoire racine de votre projet, il devrait y avoir un fichier appelé next.config.js (ou .ts, .mjs, .cjs).

next.config.js
.gitignore
package.json
README.md

Ajouter le plugin

Configurez une configuration de base pour le plugin dans votre fichier next.config.js. Cela reviendra aux valeurs par défaut.

next.config.mjs
import { withGTConfig } from 'gt-next/config';
 
const nextConfig = {}
 
export default withGTConfig(nextConfig);

Quelques exemples

Utilisation de base

Dans cette configuration, nous spécifions que l'application est disponible en anglais, espagnol et français. Nous spécifions également que la langue par défaut est l'anglais. Nous ajoutons également la description "Un blog personnel sur la technologie et les voyages". Cette description sera prise en compte dans chaque traduction effectuée.

next.config.mjs
import { withGTConfig } from 'gt-next/config'
 
const nextConfig = {}
 
export default withGTConfig(nextConfig, {
  defaultLocale: "en-US", // the default language of your app, usually "en" or "en-US"
  locales: ["en-US", "es", "fr"], // the languages your app is available in
  description: "A personal website for John Smith" // a natural language description of your site used to aid in translation
});

Inclure les locales

withGTConfig() vous permet de spécifier une liste de locales que vous souhaitez inclure. Par exemple, cette configuration spécifie que l'application sera disponible en anglais, chinois et japonais.

Cela signifie que l'application ne sera disponible que dans ces langues. Toutes les locales non incluses dans cette liste ne seront pas traduites. Par exemple, si un utilisateur essaie d'accéder à l'application dans une langue non répertoriée, l'application reviendra à la locale par défaut spécifiée.

Par défaut, votre application peut être traduite dans toutes les langues disponibles.

next.config.mjs
import { withGTConfig } from 'gt-next/config'
 
const nextConfig = {}
 
export default withGTConfig(nextConfig, {
  defaultLocale: "en-US",
  locales: ["en-US", "zh", "jp"]
});

Pour voir une liste des locales prises en charge, consultez les Locales prises en charge. Pour un guide plus détaillé sur la sélection des locales, consultez le Guide de gestion des locales.

Configuration de getLocale()

i18n est une chaîne qui spécifie un chemin personnalisé vers un fichier qui définit une fonction getLocale(). Vous pouvez spécifier un comportement personnalisé pour déterminer la locale de l'utilisateur en créant un fichier qui exporte une fonction appelée getLocale().

myapp/next.config.mjs
import { withGTConfig } from 'gt-next/config'
 
const nextConfig = {};
 
export default withGTConfig(nextConfig, {
  defaultLocale: "en-US", // the default language of your app, usually "en" or "en-US"
  i18n: "./i18n.js"
});
myapp/i18n.js
import { cookies } from "next/headers";
 
export async function getLocale() {
  const cookieStore = await cookies();
  return cookieStore.get('myCustomLocaleCookie') || 'en';
}

Fournisseur préféré

preferredModelProvider vous permet de spécifier un fournisseur de modèle préféré. Actuellement, seuls Anthropic et OpenAI sont activés, mais d'autres fournisseurs seront ajoutés à l'avenir.

Nous acheminerons toutes vos traductions vers votre fournisseur LLM préféré, mais si votre modèle préféré n'est pas disponible ou n'est pas facilement accessible, nous nous rabattrons sur un autre fournisseur.

next.config.mjs
import { withGTConfig } from 'gt-next/config'
 
const nextConfig = {};
 
export default withGTConfig(nextConfig, {
  defaultLocale: "en-US",
  preferredModelProvider: "anthropic"
});

Notes

  • withGTConfig() vous permet de configurer le comportement de GT dans votre application Next.js.
  • Vous pouvez spécifier la locale par défaut, les locales prises en charge et d'autres options liées à la traduction.

Prochaines étapes

Sur cette page