Skip to content

Update translations #64

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 7, 2025
Merged

Update translations #64

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
48 changes: 24 additions & 24 deletions apps/docs/content/fr/docs/01-app/01-getting-started/10-updating-data.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,33 @@
---
source-updated-at: 2025-06-01T01:32:20.000Z
translation-updated-at: 2025-06-02T20:02:02.492Z
title: Comment mettre à jour les données
source-updated-at: 2025-06-03T15:30:49.000Z
translation-updated-at: 2025-06-06T16:52:39.859Z
title: Comment mettre à jour des données
nav_title: Mise à jour des données
description: Apprenez comment mettre à jour les données dans votre application Next.js.
description: Apprenez à mettre à jour des données dans votre application Next.js.
related:
title: Référence API
description: En savoir plus sur les fonctionnalités mentionnées dans cette page en consultant la référence API.
description: En savoir plus sur les fonctionnalités mentionnées dans cette page en consultant la Référence API.
links:
- app/api-reference/functions/revalidatePath
- app/api-reference/functions/revalidateTag
- app/api-reference/functions/redirect
---

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.
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.

## Fonctions Serveur

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)**.
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)**.

Par convention, une `action` est une fonction asynchrone passée à `startTransition`. Les Fonctions Serveur sont automatiquement encapsulées avec `startTransition` lorsque :

- Elles sont passées à un `<form>` via la prop `action`,
- Elles sont passées à un `<button>` via la prop `formAction`
- Elles sont passées à `useActionState`
- Passées à un `<form>` via la prop `action`,
- Passées à un `<button>` via la prop `formAction`
- Passées à `useActionState`

## Création de Fonctions Serveur

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.
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.

```ts filename="app/lib/actions.ts" switcher
export async function createPost(formData: FormData) {
Expand Down Expand Up @@ -69,7 +69,7 @@ export async function deletePost(formData) {

### Composants Serveur

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 :
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 :

```tsx filename="app/page.tsx" switcher
export default function Page() {
Expand All @@ -86,7 +86,7 @@ export default function Page() {
```jsx filename="app/page.js" switcher
export default function Page() {
// Action Serveur
async function createPost(formData: FormData) {
async function createPost(formData) {
'use server'
// ...
}
Expand All @@ -97,7 +97,7 @@ export default function Page() {

### Composants Client

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 :
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 :

```ts filename="app/actions.ts" switcher
'use server'
Expand Down Expand Up @@ -140,7 +140,7 @@ Il existe deux principales façons d'invoquer une Fonction Serveur :

### Formulaires

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`.
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`.

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) :

Expand Down Expand Up @@ -196,7 +196,7 @@ export async function createPost(formData) {
}
```

> **Bon à savoir :** Lorsqu'elle est passée à la prop `action`, les Fonctions Serveur sont également appelées _Actions Serveur (Server Actions)_.
> **Bon à savoir :** Lorsqu'elle est passée à la prop `action`, une Fonction Serveur est aussi appelée _Action Serveur (Server Action)_.

### Gestionnaires d'événements

Expand All @@ -213,7 +213,7 @@ export default function LikeButton({ initialLikes }: { initialLikes: number }) {

return (
<>
<p>Total Likes : {likes}</p>
<p>Total de likes : {likes}</p>
<button
onClick={async () => {
const updatedLikes = await incrementLike()
Expand All @@ -238,7 +238,7 @@ export default function LikeButton({ initialLikes }) {

return (
<>
<p>Total Likes : {likes}</p>
<p>Total de likes : {likes}</p>
<button
onClick={async () => {
const updatedLikes = await incrementLike()
Expand All @@ -261,15 +261,15 @@ Pendant l'exécution d'une Fonction Serveur, vous pouvez afficher un indicateur
```tsx filename="app/ui/button.tsx" switcher
'use client'

import { useActionState } from 'react'
import { useActionState, startTransition } from 'react'
import { createPost } from '@/app/actions'
import { LoadingSpinner } from '@/app/ui/loading-spinner'

export function Button() {
const [state, action, pending] = useActionState(createPost, false)

return (
<button onClick={async () => action()}>
<button onClick={() => startTransition(action)}>
{pending ? <LoadingSpinner /> : 'Créer un article'}
</button>
)
Expand All @@ -279,15 +279,15 @@ export function Button() {
```jsx filename="app/ui/button.js" switcher
'use client'

import { useActionState } from 'react'
import { useActionState, startTransition } from 'react'
import { createPost } from '@/app/actions'
import { LoadingSpinner } from '@/app/ui/loading-spinner'

export function Button() {
const [state, action, pending] = useActionState(createPost, false)

return (
<button onClick={async () => action()}>
<button onClick={() => startTransition(action)}>
{pending ? <LoadingSpinner /> : 'Créer un article'}
</button>
)
Expand All @@ -296,7 +296,7 @@ export function Button() {

### Revalidation du cache

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 :
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 :

```ts filename="app/lib/actions.ts" switcher
import { revalidatePath } from 'next/cache'
Expand All @@ -323,7 +323,7 @@ export async function createPost(formData) {

### Redirection

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 :
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 :

```ts filename="app/lib/actions.ts" switcher
'use server'
Expand Down
30 changes: 16 additions & 14 deletions apps/docs/content/fr/docs/01-app/01-getting-started/14-deploying.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
---
source-updated-at: 2025-06-01T01:32:20.000Z
translation-updated-at: 2025-06-02T20:00:57.397Z
source-updated-at: 2025-06-05T23:52:35.000Z
translation-updated-at: 2025-06-06T16:51:52.474Z
title: Comment déployer votre application Next.js
nav_title: Déploiement
description: Apprenez comment déployer votre application Next.js.
description: Apprenez à déployer votre application Next.js.
---

Next.js peut être déployé en tant que serveur Node.js, conteneur Docker, export statique ou adapté pour fonctionner sur différentes plateformes.

| Option de déploiement | Fonctionnalités prises en charge |
| -------------------------------- | -------------------------------- |
| [Serveur Node.js](#nodejs-server) | Toutes |
| [Conteneur Docker](#docker) | Toutes |
| [Export statique](#static-export)| Limitées |
| [Adaptateurs](#adapters) | Spécifiques à la plateforme |
| -------------------------------- | ------------------------------- |
| [Serveur Node.js](#nodejs-server) | Toutes |
| [Conteneur Docker](#docker) | Toutes |
| [Export statique](#static-export) | Limitées |
| [Adaptateurs](#adapters) | Spécifiques à la plateforme |

## Serveur Node.js

Expand Down Expand Up @@ -45,6 +45,8 @@ Next.js peut être déployé sur n'importe quel fournisseur prenant en charge le

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.

> **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).

### Modèles

- [Docker](https://github.com/vercel/next.js/tree/canary/examples/with-docker)
Expand All @@ -57,26 +59,26 @@ Les déploiements Docker prennent en charge toutes les fonctionnalités de Next.

## Export statique

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.
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.

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.
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.

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).
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).

### Modèles

- [GitHub Pages](https://github.com/nextjs/deploy-github-pages)

## Adaptateurs

Next.js peut être adapté pour fonctionner sur différentes plateformes afin de supporter leurs capacités d'infrastructure.
Next.js peut être adapté pour fonctionner sur différentes plateformes afin de prendre en charge leurs capacités d'infrastructure.

Consultez la documentation de chaque fournisseur pour connaître les fonctionnalités Next.js prises en charge :
Consultez la documentation de chaque fournisseur pour des informations sur les fonctionnalités de Next.js prises en charge :

- [AWS Amplify Hosting](https://docs.amplify.aws/nextjs/start/quickstart/nextjs-app-router-client-components)
- [Cloudflare](https://developers.cloudflare.com/workers/frameworks/framework-guides/nextjs)
- [Deno Deploy](https://docs.deno.com/examples/next_tutorial)
- [Netlify](https://docs.netlify.com/frameworks/next-js/overview/#next-js-support-on-netlify)
- [Vercel](https://vercel.com/docs/frameworks/nextjs)

> **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.
> **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.
Loading