# gt-next: General Translation Next.js SDK: Almacenamiento local de traducciones
URL: https://generaltranslation.com/es/docs/next/guides/local-tx.mdx
---
title: Almacenamiento local de traducciones
description: Guarda las traducciones en el bundle de tu aplicación en lugar de usar una CDN
---

## ¿Qué son las traducciones locales?

Las traducciones locales se almacenan en el bundle de tu app, en lugar de descargarse desde una CDN (red de distribución de contenido). Cuando agregas el comando `gt translate` a tu proceso de compilación, se generan traducciones en formato JSON. El paso final es incorporar esas traducciones a tu app para poder usarlas.

Hay dos formas de hacerlo:

1. **En el bundle de tu app** (local): Guarda las traducciones en el bundle de tu app después de generarlas
2. **En una CDN** (predeterminado): Descarga las traducciones desde una CDN en runtime

De forma predeterminada, `gt-next` descarga las traducciones desde la CDN de General Translation. Cuando traduces tu app con nuestra API, las traducciones se guardan automáticamente en nuestra CDN.

<Callout>
  **Comportamiento predeterminado:** GT usa almacenamiento en CDN de forma predeterminada. Cambia al almacenamiento local solo si necesitas las ventajas específicas que ofrece.
</Callout>

## Ventajas e inconvenientes

### Ventajas de las traducciones locales

* **Tiempos de carga más rápidos**: Las traducciones locales se sirven directamente desde tu aplicación, por lo que cargan más rápido que las traducciones servidas desde un CDN
* **Sin dependencia de servicios externos**: La capacidad de tu aplicación para cargar traducciones no depende de la disponibilidad del CDN. Si no se encuentran traducciones para una configuración regional, la aplicación vuelve automáticamente al idioma predeterminado
* **Funciona sin conexión**: Las traducciones vienen incluidas con tu aplicación

### Desventajas de las traducciones locales

* **Aumento del tamaño del bundle**: Las traducciones locales aumentan el tamaño del bundle de tu app, lo que puede hacer que tarde más en cargarse inicialmente
* **Gestión del contenido**: Para editar una traducción, debes volver a desplegar tu app con la nueva traducción cada vez que realices cambios

## Configuración

### Paso 1: Crea la función de carga

Agrega un archivo `loadTranslations.[js|ts]` en `./src` con el siguiente contenido:

```ts title="src/loadTranslations.ts"
export default async function loadTranslations(locale: string) {
  const translations = await import(`../public/_gt/${locale}.json`);
  return translations.default;
}
```

[`withGTConfig`](/docs/next/api/config/with-gt-config) detecta automáticamente el archivo `loadTranslations.[js|ts]` en tu directorio `src/` o en la raíz del proyecto.


### Paso 2: Configura la CLI

Ejecuta el comando de configuración y selecciona el almacenamiento local:

```bash
npx gt configure
```

Cuando se te indique:

* **¿Guardar en CDN?** Selecciona &quot;No&quot;
* **Directorio de traducción:** Introduce `./public/_gt`

También puedes configurar manualmente el archivo `gt.config.json` para usar traducciones locales. Consulta la [documentación de configuración de la CLI](/docs/cli/reference/config) para más información.


### Paso 3: Genera las traducciones

Ahora, cuando ejecutes el comando `translate`, las traducciones se descargarán automáticamente y se incluirán en tu código base:

```bash
npx gt translate
```

Las traducciones se almacenarán en `public/_gt/` y se empaquetarán con tu aplicación.


## Integración con la compilación

### Proceso de compilación de Next.js

Añade la generación de traducciones a tu script de compilación:

```json
{
  "scripts": {
    "build": "npx gt translate && <...YOUR_BUILD_COMMAND...>"
  }
}
```


### Flujo de CI/CD

```yaml
# .github/workflows/deploy.yml
- name: Generate Translations
  run: npx gt translate
  
- name: Build Application  
  run: npm run build
```


## Problemas comunes

### Faltan archivos de traducción

Asegúrate de generar las traducciones antes de compilar:

```bash
# ❌ Compilar sin traducciones
<...YOUR_BUILD_COMMAND...>

# ✅ Generar las traducciones primero
npx gt translate && <...YOUR_BUILD_COMMAND...>
```


### Errores en la ruta de importación

Haz que la estructura de tus directorios coincida en la función de carga:

```ts
// ❌ Ruta incorrecta
const t = await import(`../translations/${locale}.json`);

// ✅ Ruta correcta para public/_gt
const t = await import(`../public/_gt/${locale}.json`);
```


### Gran tamaño del bundle

Considera dividir el código en aplicaciones con muchos idiomas:

```ts
// Cargar traducciones solo cuando sea necesario
export default async function loadTranslations(locale: string) {
  // Solo cargar si la configuración regional está activa
  if (locale === getCurrentLocale()) {
    const translations = await import(`../public/_gt/${locale}.json`);
    return translations.default;
  }
  return {};
}
```

<Callout>
  El almacenamiento local funciona mejor en aplicaciones con traducciones estables que no requieren actualizaciones frecuentes.
</Callout>


## Siguientes pasos

* [Guía de middleware](/docs/next/guides/middleware) - Detección de idioma y enrutamiento
* [Guía de idiomas](/docs/next/guides/languages) - Configura los idiomas admitidos
* Referencias de API: