# gt-next: General Translation Next.js SDK: Cadenas
URL: https://generaltranslation.com/es/docs/next/guides/strings.mdx
---
title: Cadenas
description: Cómo internacionalizar cadenas de texto sin formato con useGT
---

{/* GENERADO AUTOMÁTICAMENTE: No lo edites directamente. Edita la plantilla en content/docs-templates/ en su lugar. */}

La traducción de cadenas ofrece acceso directo a traducciones de texto sin JSX, ideal para atributos, propiedades de objetos y valores de texto sin formato. Usa [`useGT`](/docs/next/api/strings/use-gt) en componentes de Next.js para la traducción de cadenas.


## Inicio rápido

```jsx
import { useGT } from 'gt-next';

function MyComponent() {
  const gt = useGT();
  return (
    <input 
      placeholder={gt('Introduce tu correo electrónico')}
      title={gt('Campo de correo electrónico')}
    />
  );
}
```


## Cuándo usar la traducción de cadenas

La traducción de cadenas es ideal cuando necesitas texto plano en lugar de JSX:

### Atributos de HTML

```jsx
const gt = useGT();

<input 
  placeholder={gt('Search products...')}
  aria-label={gt('Product search input')}
  title={gt('Escribe para buscar en nuestro catálogo')}
/>
```


### Propiedades de objetos

```jsx
const gt = useGT();

const user = {
  name: 'John',
  role: 'admin',
  bio: gt('Desarrollador de software con 5 años de experiencia en React'),
  status: gt('Actualmente disponible para proyectos')
};
```


### Configuración y constantes

```jsx
const gt = useGT();

const navigationItems = [
  { label: gt('Inicio'), href: '/' },
  { label: gt('Productos'), href: '/products' },
  { label: gt('Contacto'), href: '/contact' }
];
```


### Cuándo usar T en su lugar

Usa el [componente `<T>`](/docs/next/api/components/t) para contenido JSX:

```jsx
// ✅ Usa <T> para contenido JSX
<T><p>¡Bienvenido(a) a <strong>nuestra tienda</strong>!</p></T>

// ✅ Usa traducción de cadenas para texto sin formato
<input placeholder={gt('Buscar productos')} />
```


## Uso de variables

### Variables básicas

Sustituye los marcadores por valores dinámicos:

```jsx
const gt = useGT();
const itemCount = 5;

// String with placeholder
const message = gt('Tienes {count} artículos en tu carrito', { count: itemCount });
// Resultado: "Tienes 5 artículos en tu carrito"
```


### Varias variables

```jsx
const gt = useGT();
const order = { id: 'ORD-123', total: 99.99, date: '2024-01-15' };

const confirmation = gt(
  'El pedido {orderId} por ${total} se realizó el {date}',
  { 
    orderId: order.id, 
    total: order.total, 
    date: order.date 
  }
);
```


### Formato de mensajes ICU

Para un formateo avanzado, usa la sintaxis de ICU:

```jsx
const gt = useGT();
translate('Hay {count, plural, =0 {ningún artículo} =1 {un artículo} other {{count} artículos}} en el carrito', { count: 10 });
```

<Callout>
  Obtén más información sobre ICU message format en la [documentación de Unicode](https://unicode-org.github.io/icu/userguide/format_parse/messages/).
</Callout>


## Ejemplos

### Campos de formulario

```jsx
import { useGT } from 'gt-next';

function ContactForm() {
  const gt = useGT();
  
  return (
    <form>
      <input 
        type="email"
        placeholder={gt('Enter your email address')}
        aria-label={gt('Email input field')}
      />
      <textarea 
        placeholder={gt('Cuéntanos sobre tu proyecto...')}
        aria-label={gt('Project description')}
      />
      <button type="submit">
        {gt('Send Message')}
      </button>
    </form>
  );
}
```


### Menú de navegación

```jsx
import { useGT } from 'gt-next';

function Navigation() {
  const gt = useGT();
  
  const menuItems = [
    { label: gt('Home'), href: '/', icon: 'home' },
    { label: gt('About Us'), href: '/about', icon: 'info' },
    { label: gt('Services'), href: '/services', icon: 'briefcase' },
    { label: gt('Contact'), href: '/contact', icon: 'mail' }
  ];

  return (
    <nav>
      {menuItems.map((item) => (
        <a key={item.href} href={item.href} title={item.label}>
          <Icon name={item.icon} />
          {item.label}
        </a>
      ))}
    </nav>
  );
}
```


### Fábrica de contenido dinámico

```jsx
// utils/productData.js
export function getProductMessages(gt) {
  return {
    categories: [
      { id: 'electronics', name: gt('Electronics') },
      { id: 'clothing', name: gt('Clothing') },
      { id: 'books', name: gt('Books') }
    ],
    statusMessages: {
      available: gt('En stock y listo para enviar'),
      backordered: gt('Actualmente en pedido pendiente - se envía en 2-3 semanas'),  
      discontinued: gt('Este artículo ha sido descontinuado')
    },
    errors: {
      notFound: gt('Product not found'),
      outOfStock: gt('Sorry, this item is currently out of stock')
    }
  };
}

// components/ProductCard.jsx
import { useGT } from 'gt-next';
import { getProductMessages } from '../utils/productData';

function ProductCard({ product }) {
  const gt = useGT();
  const messages = getProductMessages(gt);
  
  return (
    <div>
      <h3>{product.name}</h3>
      <p>{messages.statusMessages[product.status]}</p>
      <span>{messages.categories.find(c => c.id === product.categoryId)?.name}</span>
    </div>
  );
}
```


### Componente con título del documento

```jsx
import { useGT } from 'gt-next';
import { useEffect } from 'react';

function ProductPage() {
  const gt = useGT();
  
  useEffect(() => {
    document.title = gt('Product Catalog - Find What You Need');
    
    // Update meta description
    const metaDescription = document.querySelector('meta[name="description"]');
    if (metaDescription) {
      metaDescription.setAttribute('content', gt('Explora nuestra extensa colección de productos de alta calidad'));
    }
  }, [gt]);
  
  return (
    <div>
      <h1>{gt('Featured Products')}</h1>
      <p>{gt('Check out our latest and most popular items')}</p>
    </div>
  );
}
```


## Problemas habituales

### Contenido dinámico en tiempo de ejecución

Las cadenas deben conocerse en tiempo de compilación: no puedes traducir contenido dinámico:

```jsx
// ❌ Dynamic content won't work
function MyComponent() {
  const [userMessage, setUserMessage] = useState('');
  const gt = useGT();
  
  return <p>{gt(userMessage)}</p>; // Esto fallará
}

// ✅ Use predefined strings
function MyComponent() {
  const [messageType, setMessageType] = useState('welcome');
  const gt = useGT();
  
  const messages = {
    welcome: gt('Welcome to our app!'),
    goodbye: gt('Thanks for visiting!')
  };
  
  return <p>{messages[messageType]}</p>;
}
```


### Incumplimientos de las reglas de hooks

Sigue las reglas de los hooks de React al usar [`useGT`](/docs/next/api/strings/use-gt):

```jsx
// ❌ Don't call hooks conditionally
function MyComponent({ showMessage }) {
  if (showMessage) {
    const gt = useGT(); // Incumplimiento de las reglas de los hooks
    return <p>{gt('Hello!')}</p>;
  }
  return null;
}

// ✅ Always call hooks at top level
function MyComponent({ showMessage }) {
  const gt = useGT();
  
  if (showMessage) {
    return <p>{gt('Hello!')}</p>;
  }
  return null;
}
```

<Callout>
  Para contenido verdaderamente dinámico que requiera traducción en tiempo de ejecución, consulta la [Guía de contenido dinámico](/docs/key-concepts/dynamic-content).
</Callout>


## Próximos pasos

- [Guía de contenido dinámico](/docs/key-concepts/dynamic-content) - Gestiona traducciones en tiempo de ejecución
- [Guía de cadenas compartidas](/docs/next/guides/shared-strings) - Organiza traducciones reutilizables
- Referencia de API: