# gt-next: General Translation Next.js SDK: derive
URL: https://generaltranslation.com/fr/docs/next/api/strings/derive.mdx
---
title: derive
description: Référence de l’API de la fonction de chaîne derive()
---

{/* GÉNÉRÉ AUTOMATIQUEMENT : Ne modifiez pas directement. Modifiez le modèle dans content/docs-templates/ à la place. */}


## Vue d’ensemble

La fonction `derive` permet d’utiliser des appels de fonction statiques ou des expressions de variables dans une chaîne traduite.
C’est utile pour écrire du code réutilisable, internationaliser des phrases fragmentées et préserver l’accord grammatical.

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

gt(`${derive(getDisplayName(condition))} says hello.`);
// Crée deux entrées de traduction :
// "User says hello." -> "Usuario dice hola."
// "Admin says hello." -> "Administrador dice hola."
```

Cela fonctionne en générant des traductions distinctes pour chaque résultat possible, ce qui permet de préserver les accords grammaticaux, la conjugaison et les changements d’ordre des mots d’une langue à l’autre.

<Callout>
  **Entrées de traduction multiples :**
  `derive` crée des entrées de traduction distinctes pour chaque résultat possible de la fonction enveloppée, ce qui peut augmenter considérablement le nombre de traductions.
  Utilisez cette fonctionnalité avec discernement et privilégiez les instructions `select` d’ICU lorsque le facteur multiplicatif devient excessif.
</Callout>

<Callout>
  **Analyse statique :**
  `derive` ne peut analyser que le contenu connu au build.
  Tout contenu dynamique (variables, appels d’API, etc.) doit être encapsulé dans `declareVar`.
</Callout>

## Référence

### Paramètres

| Nom       | Type                                                         | Description                                                       |
| --------- | ------------------------------------------------------------ | ----------------------------------------------------------------- |
| `content` | `T extends string \| boolean \| number \| null \| undefined` | Un appel de fonction statique qui renvoie un contenu traduisible. |

### Valeur de retour

Renvoie `content` de type `T`.

***

## Comportement

### Analyse au build

Pendant le processus de build, l&#39;outil CLI :

1. Analyse la fonction enveloppée par `derive`
2. Détermine toutes les valeurs de retour possibles de la fonction (elles doivent pouvoir être analysées statiquement au build)
3. Crée des entrées de traduction distinctes pour chaque résultat possible

### Considérations relatives aux performances

Comme `<Derive>`, `derive` multiplie les entrées de traduction.
Chaque appel de fonction avec plusieurs résultats crée des traductions distinctes, et plusieurs appels à `derive` dans une même chaîne multiplient exponentiellement le nombre total d’entrées.

***

## Exemple

### Contenu réutilisable

Vous pouvez utiliser `derive` pour gérer les phrases fragmentées ou le contenu réutilisable avec des appels de fonction.

```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>;
}
```


### Phrases fragmentées

Vous pouvez utiliser `derive` pour gérer les phrases fragmentées à l’aide d’appels de fonction.

```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>;
}
```


### Accord

Sans `derive`, traduire l’accord est syntaxiquement lourd.
Vous devez ajouter une instruction `select` pour gérer l’accord (pluriel, genre, etc.).
Ensuite, vous devez également énumérer chaque résultat possible.

```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>;
}
```

Avec `derive`, la gestion des accords devient triviale.
Aucune instruction `select` n’est nécessaire, et vous n’avez pas non plus à spécifier tous les cas possibles.

```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>;
}
```

En utilisant `derive`, l’outil CLI détecte que `getSubject` a deux résultats possibles et crée une entrée de traduction pour chacun.
Ainsi, la concordance est gérée automatiquement.

* &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;


### Avec des variables

Vous pouvez combiner `derive` et `declareVar` pour gérer du contenu dynamique.

```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>;
}
```


### Fonctions complexes

Les fonctions peuvent contenir plusieurs branches conditionnelles et plusieurs instructions `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>;
}
```


### Expressions et logique en ligne

Vous pouvez intégrer directement de la logique dans l’appel à `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>;
}
```

***


## Remarques

* Utilisez `derive` avec discernement, car il peut augmenter de façon exponentielle le nombre d’entrées de traduction
* Tous les résultats possibles doivent pouvoir être analysés statiquement au moment du build
* Les variables dans les fonctions statiques doivent être encapsulées dans `declareVar`

## Prochaines étapes

* Consultez [`declareVar`](/docs/next/api/strings/declare-var) pour marquer le contenu dynamique dans des fonctions statiques
* Consultez [`decodeVars`](/docs/next/api/strings/decode-vars) pour extraire les valeurs d’origine des variables déclarées
* Consultez [`<Derive>`](/docs/next/api/components/derive) pour l’équivalent en JSX
* Lisez les [notes de version](/devlog/gt-next_v6_12_0) pour en savoir plus