You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: apps/docs/content/fr/docs/01-app/01-getting-started/10-updating-data.mdx
+24-24Lines changed: 24 additions & 24 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,33 +1,33 @@
1
1
---
2
-
source-updated-at: 2025-06-01T01:32:20.000Z
3
-
translation-updated-at: 2025-06-02T20:02:02.492Z
4
-
title: Comment mettre à jour les données
2
+
source-updated-at: 2025-06-03T15:30:49.000Z
3
+
translation-updated-at: 2025-06-06T16:52:39.859Z
4
+
title: Comment mettre à jour des données
5
5
nav_title: Mise à jour des données
6
-
description: Apprenez comment mettre à jour les données dans votre application Next.js.
6
+
description: Apprenez à mettre à jour des données dans votre application Next.js.
7
7
related:
8
8
title: Référence API
9
-
description: En savoir plus sur les fonctionnalités mentionnées dans cette page en consultant la référence API.
9
+
description: En savoir plus sur les fonctionnalités mentionnées dans cette page en consultant la Référence API.
10
10
links:
11
11
- app/api-reference/functions/revalidatePath
12
12
- app/api-reference/functions/revalidateTag
13
13
- app/api-reference/functions/redirect
14
14
---
15
15
16
-
Vous pouvez mettre à jour les données dans Next.js en utilisant les [Fonctions Serveur (Server Functions)](https://react.dev/reference/rsc/server-functions) de React. Cette page explique comment [créer](#creating-server-functions) et [invoquer](#invoking-server-functions) des Fonctions Serveur.
16
+
Vous pouvez mettre à jour des données dans Next.js en utilisant les [Fonctions Serveur (Server Functions)](https://react.dev/reference/rsc/server-functions) de React. Cette page explique comment [créer](#creating-server-functions) et [invoquer](#invoking-server-functions) des Fonctions Serveur.
17
17
18
18
## Fonctions Serveur
19
19
20
-
Une Fonction Serveur est une fonction asynchrone exécutée sur le serveur. Les Fonctions Serveur sont intrinsèquement asynchrones car elles sont invoquées par le client via une requête réseau. Lorsqu'elles sont invoquées dans le cadre d'une `action`, elles sont également appelées **Actions Serveur (Server Actions)**.
20
+
Une Fonction Serveur est une fonction asynchrone exécutée sur le serveur. Les Fonctions Serveur sont intrinsèquement asynchrones car elles sont invoquées par le client via une requête réseau. Lorsqu'elles sont invoquées dans le cadre d'une `action`, elles sont aussi appelées **Actions Serveur (Server Actions)**.
21
21
22
22
Par convention, une `action` est une fonction asynchrone passée à `startTransition`. Les Fonctions Serveur sont automatiquement encapsulées avec `startTransition` lorsque :
23
23
24
-
-Elles sont passées à un `<form>` via la prop `action`,
25
-
-Elles sont passées à un `<button>` via la prop `formAction`
26
-
-Elles sont passées à `useActionState`
24
+
-Passées à un `<form>` via la prop `action`,
25
+
-Passées à un `<button>` via la prop `formAction`
26
+
-Passées à `useActionState`
27
27
28
28
## Création de Fonctions Serveur
29
29
30
-
Une Fonction Serveur peut être définie en utilisant la directive [`use server`](https://react.dev/reference/rsc/use-server). Vous pouvez placer la directive en haut d'une fonction **asynchrone** pour marquer la fonction comme Fonction Serveur, ou en haut d'un fichier séparé pour marquer toutes les exportations de ce fichier.
30
+
Une Fonction Serveur peut être définie en utilisant la directive [`use server`](https://react.dev/reference/rsc/use-server). Vous pouvez placer la directive en haut d'une fonction **asynchrone** pour marquer la fonction comme Fonction Serveur, ou en haut d'un fichier séparé pour marquer toutes ses exportations.
@@ -69,7 +69,7 @@ export async function deletePost(formData) {
69
69
70
70
### Composants Serveur
71
71
72
-
Les Fonctions Serveur peuvent être intégrées dans les Composants Serveur en ajoutant la directive `"use server"` en haut du corps de la fonction :
72
+
Les Fonctions Serveur peuvent être intégrées dans des Composants Serveur en ajoutant la directive `"use server"` en haut du corps de la fonction :
73
73
74
74
```tsx filename="app/page.tsx" switcher
75
75
exportdefaultfunction Page() {
@@ -86,7 +86,7 @@ export default function Page() {
86
86
```jsx filename="app/page.js" switcher
87
87
exportdefaultfunctionPage() {
88
88
// Action Serveur
89
-
asyncfunctioncreatePost(formData:FormData) {
89
+
asyncfunctioncreatePost(formData) {
90
90
'use server'
91
91
// ...
92
92
}
@@ -97,7 +97,7 @@ export default function Page() {
97
97
98
98
### Composants Client
99
99
100
-
Il n'est pas possible de définir des Fonctions Serveur dans les Composants Client. Cependant, vous pouvez les invoquer dans les Composants Client en les important depuis un fichier qui contient la directive `"use server"` en haut :
100
+
Il n'est pas possible de définir des Fonctions Serveur dans des Composants Client. Cependant, vous pouvez les invoquer dans des Composants Client en les important depuis un fichier contenant la directive `"use server"` en haut :
101
101
102
102
```ts filename="app/actions.ts" switcher
103
103
'use server'
@@ -140,7 +140,7 @@ Il existe deux principales façons d'invoquer une Fonction Serveur :
140
140
141
141
### Formulaires
142
142
143
-
React étend l'élément HTML [`<form>`](https://react.dev/reference/react-dom/components/form) pour permettre l'invocation d'une Fonction Serveur avec la prop HTML `action`.
143
+
React étend l'élément HTML [`<form>`](https://react.dev/reference/react-dom/components/form) pour permettre l'invocation d'une Fonction Serveur via la prop HTML `action`.
144
144
145
145
Lorsqu'elle est invoquée dans un formulaire, la fonction reçoit automatiquement l'objet [`FormData`](https://developer.mozilla.org/docs/Web/API/FormData/FormData). Vous pouvez extraire les données en utilisant les [méthodes natives de `FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData#instance_methods) :
146
146
@@ -196,7 +196,7 @@ export async function createPost(formData) {
196
196
}
197
197
```
198
198
199
-
> **Bon à savoir :** Lorsqu'elle est passée à la prop `action`, les Fonctions Serveur sont également appelées _Actions Serveur (Server Actions)_.
199
+
> **Bon à savoir :** Lorsqu'elle est passée à la prop `action`, une Fonction Serveur est aussi appelée _Action Serveur (Server Action)_.
200
200
201
201
### Gestionnaires d'événements
202
202
@@ -213,7 +213,7 @@ export default function LikeButton({ initialLikes }: { initialLikes: number }) {
{pending ? <LoadingSpinner /> : 'Créer un article'}
292
292
</button>
293
293
)
@@ -296,7 +296,7 @@ export function Button() {
296
296
297
297
### Revalidation du cache
298
298
299
-
Après avoir effectué une mise à jour, vous pouvez revalider le cache de Next.js et afficher les données mises à jour en appelant [`revalidatePath`](/docs/app/api-reference/functions/revalidatePath) ou [`revalidateTag`](/docs/app/api-reference/functions/revalidateTag) dans la Fonction Serveur :
299
+
Après une mise à jour, vous pouvez revalider le cache de Next.js et afficher les données actualisées en appelant [`revalidatePath`](/docs/app/api-reference/functions/revalidatePath) ou [`revalidateTag`](/docs/app/api-reference/functions/revalidateTag) dans la Fonction Serveur :
300
300
301
301
```ts filename="app/lib/actions.ts" switcher
302
302
import { revalidatePath } from 'next/cache'
@@ -323,7 +323,7 @@ export async function createPost(formData) {
323
323
324
324
### Redirection
325
325
326
-
Vous pouvez rediriger l'utilisateur vers une autre page après avoir effectué une mise à jour. Pour ce faire, appelez [`redirect`](/docs/app/api-reference/functions/redirect) dans la Fonction Serveur :
326
+
Vous pouvez rediriger l'utilisateur vers une autre page après une mise à jour en appelant [`redirect`](/docs/app/api-reference/functions/redirect) dans la Fonction Serveur :
|[Adaptateurs](#adapters)| Spécifiques à la plateforme |
17
17
18
18
## Serveur Node.js
19
19
@@ -45,6 +45,8 @@ Next.js peut être déployé sur n'importe quel fournisseur prenant en charge le
45
45
46
46
Les déploiements Docker prennent en charge toutes les fonctionnalités de Next.js. Apprenez comment les [configurer](/docs/app/guides/self-hosting) pour votre infrastructure.
47
47
48
+
> **Remarque pour le développement :** Bien que Docker soit excellent pour les déploiements en production, envisagez d'utiliser le développement local (`npm run dev`) au lieu de Docker pendant le développement sur Mac et Windows pour de meilleures performances. [En savoir plus sur l'optimisation du développement local](/docs/app/guides/local-development).
@@ -57,26 +59,26 @@ Les déploiements Docker prennent en charge toutes les fonctionnalités de Next.
57
59
58
60
## Export statique
59
61
60
-
Next.js permet de démarrer comme un site statique ou une [Application à Page Unique (SPA)](/docs/app/guides/single-page-applications), puis éventuellement de passer à des fonctionnalités nécessitant un serveur.
62
+
Next.js permet de démarrer en tant que site statique ou [Application à Page Unique (SPA)](/docs/app/guides/single-page-applications), puis de passer ultérieurement à des fonctionnalités nécessitant un serveur.
61
63
62
-
Comme Next.js prend en charge les [exports statiques](/docs/app/guides/static-exports), il peut être déployé et hébergé sur n'importe quel serveur web capable de servir des assets statiques HTML/CSS/JS. Cela inclut des outils comme AWS S3, Nginx ou Apache.
64
+
Puisque Next.js prend en charge les [exports statiques](/docs/app/guides/static-exports), il peut être déployé et hébergé sur n'importe quel serveur web capable de servir des ressources statiques HTML/CSS/JS. Cela inclut des outils comme AWS S3, Nginx ou Apache.
63
65
64
-
Fonctionner en tant qu'[export statique](/docs/app/guides/static-exports)**ne prend pas en charge** les fonctionnalités de Next.js nécessitant un serveur. [En savoir plus](/docs/app/guides/static-exports#unsupported-features).
66
+
L'exécution en tant qu'[export statique](/docs/app/guides/static-exports)**ne prend pas en charge** les fonctionnalités de Next.js nécessitant un serveur. [En savoir plus](/docs/app/guides/static-exports#unsupported-features).
> **Note :** Nous travaillons sur une [API d'adaptateurs de déploiement](https://github.com/vercel/next.js/discussions/77740) pour que toutes les plateformes puissent l'adopter. Une fois terminée, nous ajouterons une documentation sur la création de vos propres adaptateurs.
84
+
> **Remarque :** Nous travaillons sur une [API d'adaptateurs de déploiement](https://github.com/vercel/next.js/discussions/77740) pour que toutes les plateformes puissent l'adopter. Une fois terminée, nous ajouterons une documentation sur la création de vos propres adaptateurs.
0 commit comments