Configuración de i18n

Configuración del comportamiento de i18n en tu aplicación Next.js

Descripción general

La función withGTConfig() inicializa la configuración de General Translation (GT) para una aplicación Next.js. Al pasar propiedades a esta función, podemos controlar el comportamiento de internacionalización (i18n) de la aplicación. Esto incluye establecer el idioma predeterminado (también conocido como el idioma de respaldo), los idiomas compatibles y otras opciones relacionadas con la traducción.

Añadiendo el plugin

El primer paso es agregar la función de plugin withGTConfig() a tu archivo de configuración de next.

Localizando tu archivo de configuración de next

En el directorio raíz de tu proyecto, debería haber un archivo llamado next.config.js (o .ts, .mjs, .cjs).

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

Añadir el plugin

Configura una configuración básica para el plugin en tu archivo next.config.js. Esto recurrirá a los valores predeterminados.

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

Algunos Ejemplos

Uso Básico

En esta configuración, especificamos que la aplicación está disponible en Inglés, Español y Francés. También especificamos que el idioma predeterminado es Inglés. Además, añadimos la descripción "Un blog personal sobre tecnología y viajes". Esta descripción se tendrá en cuenta en cada traducción que se realice.

next.config.mjs
import { withGTConfig } from 'gt-next/config'
 
const nextConfig = {}
 
export default withGTConfig(nextConfig, {
  defaultLocale: "en-US", // el idioma predeterminado de tu aplicación, generalmente "en" o "en-US"
  locales: ["en-US", "es", "fr"], // los idiomas en los que tu aplicación está disponible
  description: "Un sitio web personal para John Smith" // una descripción en lenguaje natural de tu sitio utilizada para ayudar en la traducción
});

Incluir Locales

withGTConfig() te permite especificar una lista de locales que te gustaría incluir. Por ejemplo, esta configuración especifica que la aplicación estará disponible en Inglés, Chino y Japonés.

Esto significa que la aplicación solo estará disponible en estos idiomas. Cualquier local no incluido en esta lista no será traducido. Por ejemplo, si un usuario intenta acceder a la aplicación en un idioma no listado, la aplicación se establecerá en el local predeterminado especificado.

Por defecto, tu aplicación puede ser traducida a todos los idiomas disponibles.

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

Para ver una lista de locales soportados, consulta los Locales Soportados. Para una guía más detallada sobre la selección de locales, consulta la Guía de Gestión de Locales.

Configurando getLocale()

i18n es una cadena que especifica una ruta personalizada a un archivo que define una función getLocale(). Puedes especificar un comportamiento personalizado para determinar el local del usuario creando un archivo que exporte una función llamada getLocale().

myapp/next.config.mjs
import { withGTConfig } from 'gt-next/config'
 
const nextConfig = {};
 
export default withGTConfig(nextConfig, {
  defaultLocale: "en-US", // el idioma predeterminado de tu aplicación, generalmente "en" o "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';
}

Proveedor Preferido

preferredModelProvider te permite especificar un proveedor de modelo preferido. Actualmente, solo Anthropic y OpenAI están habilitados, pero se añadirán más proveedores en el futuro.

Enviaremos todas tus traducciones a tu proveedor LLM preferido, pero si tu modelo preferido no está disponible o no es fácilmente accesible, recurriremos a un proveedor diferente.

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

Notas

  • withGTConfig() te permite configurar el comportamiento de GT en tu aplicación Next.js.
  • Puedes especificar la configuración regional predeterminada, las configuraciones regionales compatibles y otras opciones relacionadas con la traducción.

Próximos Pasos

En esta página