# gt-next: General Translation Next.js SDK: derive
URL: https://generaltranslation.com/es/docs/next/api/strings/derive.mdx
---
title: derive
description: Referencia de la API para la función derive() de cadena de texto
---

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


## Descripción general

La función `derive` permite usar llamadas a funciones estáticas o expresiones de variables dentro de una cadena de traducción.
Esto es útil para escribir código reutilizable, internacionalizar frases fragmentadas y preservar la concordancia gramatical.

```jsx
const getDisplayName = (condition) => {
  return condition ? "User" : 'Admin';
};

gt(`${derive(getDisplayName(condition))} says hello.`);
// Crea dos entradas de traducción:
// "User says hello." -> "Usuario dice hola."
// "Admin says hello." -> "Administrador dice hola."
```

Esto funciona generando traducciones distintas para cada resultado posible, con la ventaja de preservar la concordancia, la conjugación y los cambios en el orden de las palabras entre idiomas.

<Callout>
  **Varias entradas de traducción:**
  `derive` crea entradas de traducción independientes para cada resultado posible de la función encapsulada, lo que puede aumentar significativamente la cantidad de traducciones.
  Usa esta función con criterio y prioriza las sentencias `select` de ICU cuando el factor de multiplicación sea excesivo.
</Callout>

<Callout>
  **Análisis estático:**
  `derive` solo puede analizar contenido conocido en la fase de compilación.
  Cualquier contenido dinámico (variables, llamadas a API, etc.) debe envolverse con `declareVar`.
</Callout>

## Referencia

### Parámetros

| Nombre    | Tipo                                                         | Descripción                                                           |
| --------- | ------------------------------------------------------------ | --------------------------------------------------------------------- |
| `content` | `T extends string \| boolean \| number \| null \| undefined` | Una llamada a una función estática que devuelve contenido traducible. |

### Devuelve

Devuelve `content`, de tipo `T`.

***

## Comportamiento

### Análisis en fase de compilación

Durante el proceso de compilación, la herramienta CLI:

1. Analiza la función envuelta en `derive`
2. Determina todos los posibles valores de retorno de la función (deben poder analizarse estáticamente en fase de compilación)
3. Crea entradas de traducción independientes para cada resultado distinto

### Consideraciones sobre el rendimiento

Al igual que `<Derive>`, `derive` multiplica las entradas de traducción.
Cada llamada a una función con múltiples resultados crea traducciones independientes, y varias llamadas a `derive` en la misma cadena multiplican exponencialmente el número total de entradas.

***

## Ejemplo

### Contenido reutilizable

Puedes usar `derive` para manejar frases fragmentadas o contenido reutilizable con llamadas a funciones.

```jsx copy
import { derive, gt } from 'gt-next';

function getSubject() {
  return "boy";
}

function Component() {
  const translation1 = gt(`The ${derive(getSubject())} is playing.`);
  const translation2 = gt(`The ${derive(getSubject())} is having fun.`);
  const translation3 = gt(`The ${derive(getSubject())} is having a great time.`);
  return <p>{translation1} {translation2} {translation3}</p>;
}
```


### Frases fragmentadas

Puedes usar `derive` para trabajar con frases fragmentadas mediante llamadas a funciones.

```jsx copy
import { derive, gt } from 'gt-next';

function getSubject(gender) {
  return gender === 'male' ? 'boy' : 'girl';
}

function Component({ gender }) {
  const translation = gt(`The ${derive(getSubject(gender))} is playing.`);
  return <p>{translation}</p>;
}
```

### Concordancia

Sin `derive`, traducir la concordancia resulta sintácticamente engorroso.
Tienes que añadir una sentencia `select` para manejar la concordancia (pluralidad, género, etc.).
Luego, también debes enumerar cada resultado posible.

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

function getSubject(gender) {
  return gender === 'male' ? 'boy' : 'girl';
}

function Component({ gender }) {
  const translation = gt(
    '{gender, select, boy {The boy is playing.} girl {The girl is playing.} other {}}',
    {
      gender: getSubject(gender) ,
    },
  );
  return <p>{translation}</p>;
}
```

Con `derive`, la concordancia pasa a ser trivial.
No necesitas ninguna sentencia `select` ni especificar cada posible resultado.

```jsx copy
import { derive, declareVar, gt } from 'gt-next';

function getSubject(gender) {
  return gender === 'male' ? 'boy' : 'girl';
}

function Component({ gender }) {
  const translation = gt(`The ${derive(getSubject(gender))} is playing.`);
  return <p>{translation}</p>;
}
```

Al usar `derive`, la herramienta CLI detecta que `getSubject` tiene dos resultados posibles y crea una entrada de traducción para cada uno.
De este modo, la concordancia se resuelve automáticamente.

* &quot;The boy is playing&quot; -&gt; &quot;*El* niño está jugando&quot;
* &quot;The girl is playing&quot; -&gt; &quot;*La* niña está jugando&quot;


### Con variables

Puedes combinar `derive` con `declareVar` para contenido dinámico.

```jsx copy
import { derive, declareVar, gt } from 'gt-next';

function getGreeting(name) {
  return name ? `Hello, ${declareVar(name)}` : 'Hello, stranger';
}

function Component({ name }) {
  const translation = gt(`${derive(getGreeting(name))}! How are you?`);
  return <p>{translation}</p>;
}
```


### Funciones complejas

Las funciones pueden contener varias ramas condicionales y sentencias `return`.

```jsx copy
import { derive, gt } from 'gt-next';

function getStatusMessage(status, priority) {
  if (status === 'complete') {
    return priority === 'high' ? 'Urgent task completed' : 'Task completed';
  } else if (status === 'pending') {
    return priority === 'high' ? 'Urgent task pending' : 'Task pending';
  }
  return 'Task status unknown';
}

function Component({ status, priority }) {
  const message = gt(`${derive(getStatusMessage(status, priority))}.`);
  return <p>{message}</p>;
}
```


### Expresiones y lógica en línea

Puedes incorporar lógica directamente en la llamada a `derive`.

```jsx copy
import { derive, gt } from 'gt-next';

function Component({ gender }) {
  const message = gt(`The ${derive(gender === 'male' ? 'boy' : 'girl')} is playing.`);
  return <p>{message}</p>;
}
```

***


## Notas

* Usa `derive` con criterio, ya que puede aumentar exponencialmente las entradas de traducción
* Todos los resultados posibles deben poder analizarse de forma estática en la fase de compilación
* Las variables dentro de funciones estáticas deben envolverse con `declareVar`

## Siguientes pasos

* Consulta [`declareVar`](/docs/next/api/strings/declare-var) para marcar contenido dinámico dentro de funciones estáticas
* Consulta [`decodeVars`](/docs/next/api/strings/decode-vars) para extraer los valores originales de las variables declaradas
* Consulta [`<Derive>`](/docs/next/api/components/derive) para ver su equivalente en JSX
* Lee las [notas de la versión](/devlog/gt-next_v6_12_0) para obtener más información