diff --git a/apps/docs/content/fr/docs/01-app/01-getting-started/10-updating-data.mdx b/apps/docs/content/fr/docs/01-app/01-getting-started/10-updating-data.mdx index adf3850c..9aa48286 100644 --- a/apps/docs/content/fr/docs/01-app/01-getting-started/10-updating-data.mdx +++ b/apps/docs/content/fr/docs/01-app/01-getting-started/10-updating-data.mdx @@ -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 `
` via la prop `action`, -- Elles sont passées à un ` ) @@ -279,7 +279,7 @@ 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' @@ -287,7 +287,7 @@ export function Button() { const [state, action, pending] = useActionState(createPost, false) return ( - ) @@ -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' @@ -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' diff --git a/apps/docs/content/fr/docs/01-app/01-getting-started/14-deploying.mdx b/apps/docs/content/fr/docs/01-app/01-getting-started/14-deploying.mdx index c5f3ca2c..ff0d2606 100644 --- a/apps/docs/content/fr/docs/01-app/01-getting-started/14-deploying.mdx +++ b/apps/docs/content/fr/docs/01-app/01-getting-started/14-deploying.mdx @@ -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 @@ -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) @@ -57,11 +59,11 @@ 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 @@ -69,9 +71,9 @@ Fonctionner en tant qu'[export statique](/docs/app/guides/static-exports) **ne p ## 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) @@ -79,4 +81,4 @@ Consultez la documentation de chaque fournisseur pour connaître les fonctionnal - [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. \ No newline at end of file +> **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. \ No newline at end of file diff --git a/apps/docs/content/fr/docs/01-app/02-guides/local-development.mdx b/apps/docs/content/fr/docs/01-app/02-guides/local-development.mdx index 6e8e2937..b552dd28 100644 --- a/apps/docs/content/fr/docs/01-app/02-guides/local-development.mdx +++ b/apps/docs/content/fr/docs/01-app/02-guides/local-development.mdx @@ -1,9 +1,9 @@ --- -source-updated-at: 2025-05-19T22:31:51.000Z -translation-updated-at: 2025-06-02T19:59:51.652Z +source-updated-at: 2025-06-05T23:52:35.000Z +translation-updated-at: 2025-06-06T16:52:25.297Z title: Comment optimiser votre environnement de développement local nav_title: Environnement de développement -description: Découvrez comment optimiser votre environnement de développement local avec Next.js. +description: Apprenez à optimiser votre environnement de développement local avec Next.js. --- Next.js est conçu pour offrir une excellente expérience développeur. À mesure que votre application grandit, vous pourriez remarquer des temps de compilation plus lents lors du développement local. Ce guide vous aidera à identifier et résoudre les problèmes courants de performance lors de la compilation. @@ -12,7 +12,7 @@ Next.js est conçu pour offrir une excellente expérience développeur. À mesur Le processus de développement avec `next dev` est différent de `next build` et `next start`. -`next dev` compile les routes de votre application au fur et à mesure que vous les ouvrez ou naviguez vers elles. Cela vous permet de démarrer le serveur de développement sans attendre que chaque route de votre application soit compilée, ce qui est à la fois plus rapide et utilise moins de mémoire. L'exécution d'une build de production applique d'autres optimisations, comme la minification des fichiers et la création de hash de contenu, qui ne sont pas nécessaires pour le développement local. +`next dev` compile les routes de votre application au fur et à mesure que vous les ouvrez ou naviguez vers elles. Cela vous permet de démarrer le serveur de développement sans attendre que chaque route de votre application soit compilée, ce qui est à la fois plus rapide et utilise moins de mémoire. L'exécution d'une build de production applique d'autres optimisations, comme la minification des fichiers et la création de hachages de contenu, qui ne sont pas nécessaires pour le développement local. ## Améliorer les performances en développement local @@ -37,7 +37,7 @@ npm run dev --turbopack ### 3. Vérifiez vos imports -La manière dont vous importez du code peut grandement affecter le temps de compilation et de bundling. Apprenez-en plus sur [l'optimisation du bundling de packages](/docs/app/guides/package-bundling) et explorez des outils comme [Dependency Cruiser](https://github.com/sverweij/dependency-cruiser) ou [Madge](https://github.com/pahen/madge). +La façon dont vous importez du code peut grandement affecter le temps de compilation et de bundling. Apprenez-en plus sur [l'optimisation du bundling des packages](/docs/app/guides/package-bundling) et explorez des outils comme [Dependency Cruiser](https://github.com/sverweij/dependency-cruiser) ou [Madge](https://github.com/pahen/madge). ### Bibliothèques d'icônes @@ -61,17 +61,17 @@ Par exemple, si votre application utilise `react-icons` et importe tous ces ense - `tb` (tabler-icons) - `cg` (cssgg) -Combinés, ils représenteront des dizaines de milliers de modules que le compilateur doit traiter, même si vous n'utilisez qu'une seule importation de chaque. +Combinés, ils représenteront des dizaines de milliers de modules que le compilateur doit gérer, même si vous n'utilisez qu'une seule importation de chaque. ### Fichiers "barrel" -Les "barrel files" sont des fichiers qui exportent de nombreux éléments d'autres fichiers. Ils peuvent ralentir les builds car le compilateur doit les analyser pour détecter s'il y a des effets de bord dans la portée du module en utilisant l'import. +Les "fichiers barrel" sont des fichiers qui exportent de nombreux éléments depuis d'autres fichiers. Ils peuvent ralentir les builds car le compilateur doit les analyser pour détecter s'il y a des effets de bord dans la portée du module en utilisant l'import. -Essayez d'importer directement depuis des fichiers spécifiques lorsque possible. [En savoir plus sur les barrel files](https://vercel.com/blog/how-we-optimized-package-imports-in-next-js) et les optimisations intégrées dans Next.js. +Essayez d'importer directement depuis des fichiers spécifiques lorsque possible. [En savoir plus sur les fichiers barrel](https://vercel.com/blog/how-we-optimized-package-imports-in-next-js) et les optimisations intégrées dans Next.js. -### Optimiser les imports de packages +### Optimisez les imports de packages -Next.js peut optimiser automatiquement les imports pour certains packages. Si vous utilisez des packages qui utilisent des barrel files, ajoutez-les à votre `next.config.js` : +Next.js peut automatiquement optimiser les imports pour certains packages. Si vous utilisez des packages qui utilisent des fichiers barrel, ajoutez-les à votre `next.config.js` : ```jsx module.exports = { @@ -85,9 +85,9 @@ Turbopack analyse automatiquement les imports et les optimise. Il ne nécessite ### 4. Vérifiez votre configuration Tailwind CSS -Si vous utilisez Tailwind CSS, assurez-vous qu'il est configuré correctement. +Si vous utilisez Tailwind CSS, assurez-vous qu'il est correctement configuré. -Une erreur courante consiste à configurer votre tableau `content` d'une manière qui inclut `node_modules` ou d'autres répertoires volumineux de fichiers qui ne devraient pas être analysés. +Une erreur courante est de configurer votre tableau `content` de manière à inclure `node_modules` ou d'autres répertoires volumineux de fichiers qui ne devraient pas être analysés. Tailwind CSS version 3.4.8 ou plus récente vous avertira des paramètres qui pourraient ralentir votre build. @@ -119,13 +119,13 @@ Tailwind CSS version 3.4.8 ou plus récente vous avertira des paramètres qui po Si vous avez ajouté des paramètres webpack personnalisés, ils pourraient ralentir la compilation. -Demandez-vous si vous en avez vraiment besoin pour le développement local. Vous pouvez éventuellement n'inclure certains outils que pour les builds de production, ou explorer le passage à Turbopack et utiliser des [loaders](/docs/app/api-reference/config/next-config-js/turbopack#supported-loaders). +Demandez-vous si vous en avez vraiment besoin pour le développement local. Vous pouvez éventuellement ne les inclure que pour les builds de production, ou explorer le passage à Turbopack et utiliser des [loaders](/docs/app/api-reference/config/next-config-js/turbopack#supported-loaders). ### 6. Optimisez l'utilisation de la mémoire -Si votre application est très volumineuse, elle pourrait avoir besoin de plus de mémoire. +Si votre application est très volumineuse, elle pourrait nécessiter plus de mémoire. -[En savoir plus sur l'optimisation de l'utilisation mémoire](/docs/app/guides/memory-usage). +[En savoir plus sur l'optimisation de l'utilisation de la mémoire](/docs/app/guides/memory-usage). ### 7. Composants Serveur et récupération de données @@ -135,6 +135,20 @@ L'option expérimentale `serverComponentsHmrCache` vous permet de mettre en cach [En savoir plus sur l'option expérimentale](/docs/app/api-reference/config/next-config-js/serverComponentsHmrCache). +### 8. Privilégiez le développement local plutôt que Docker + +Si vous utilisez Docker pour le développement sur Mac ou Windows, vous pourriez rencontrer des performances significativement plus lentes par rapport à l'exécution locale de Next.js. + +L'accès au système de fichiers par Docker sur Mac et Windows peut faire que le Hot Module Replacement (HMR) prend des secondes voire des minutes, alors que la même application s'exécute avec un HMR rapide en développement local. + +Cette différence de performance est due à la façon dont Docker gère les opérations sur le système de fichiers en dehors des environnements Linux. Pour la meilleure expérience de développement : + +- Utilisez le développement local (`npm run dev` ou `pnpm dev`) plutôt que Docker pendant le développement +- Réservez Docker pour les déploiements en production et les tests de builds de production +- Si vous devez utiliser Docker pour le développement, envisagez d'utiliser Docker sur une machine ou VM Linux + +[En savoir plus sur le déploiement Docker](/docs/app/getting-started/deploying#docker) pour un usage en production. + ## Outils pour identifier les problèmes ### Journalisation détaillée des fetch @@ -180,8 +194,8 @@ Il fournit des informations détaillées sur le temps pris par chaque module pou next internal turbo-trace-server .next/trace-turbopack ``` -1. Une fois le serveur de trace en marche, vous pouvez visualiser la trace à l'adresse https://trace.nextjs.org/. -1. Par défaut, le visualiseur de trace agrège les temps, pour voir chaque temps individuellement vous pouvez passer de "Aggregated in order" à "Spans in order" en haut à droite du visualiseur. +1. Une fois le serveur de trace démarré, vous pouvez visualiser la trace à l'adresse https://trace.nextjs.org/. +1. Par défaut, le visualiseur de trace agrège les timings. Pour voir chaque temps individuel, vous pouvez basculer de "Aggregated in order" à "Spans in order" en haut à droite du visualiseur. ## Toujours des problèmes ? diff --git a/apps/docs/content/fr/docs/01-app/02-guides/memory-usage.mdx b/apps/docs/content/fr/docs/01-app/02-guides/memory-usage.mdx index 477c9af8..7be67edc 100644 --- a/apps/docs/content/fr/docs/01-app/02-guides/memory-usage.mdx +++ b/apps/docs/content/fr/docs/01-app/02-guides/memory-usage.mdx @@ -1,6 +1,6 @@ --- -source-updated-at: 2025-05-16T04:52:11.000Z -translation-updated-at: 2025-06-02T19:59:03.784Z +source-updated-at: 2025-06-05T15:29:30.000Z +translation-updated-at: 2025-06-06T16:52:06.827Z title: Comment optimiser l'utilisation de la mémoire nav_title: Utilisation de la mémoire description: Optimisez la mémoire utilisée par votre application en développement et en production. @@ -14,7 +14,7 @@ Explorons quelques stratégies et techniques pour optimiser la mémoire et réso Les applications avec un grand nombre de dépendances utiliseront plus de mémoire. -L'[Analyseur de bundle](/docs/app/guides/package-bundling) peut vous aider à identifier les grandes dépendances de votre application qui pourraient être supprimées pour améliorer les performances et l'utilisation de la mémoire. +L'[Analyseur de bundle (Bundle Analyzer)](/docs/app/guides/package-bundling) peut vous aider à identifier les dépendances volumineuses dans votre application qui pourraient être supprimées pour améliorer les performances et l'utilisation de la mémoire. ## Essayer `experimental.webpackMemoryOptimizations` @@ -24,15 +24,15 @@ L'[Analyseur de bundle](/docs/app/guides/package-bundling) peut vous aider à id ## Exécuter `next build` avec `--experimental-debug-memory-usage` -À partir de la version `14.2.0`, vous pouvez exécuter `next build --experimental-debug-memory-usage` pour lancer la build dans un mode où Next.js affichera en continu des informations sur l'utilisation de la mémoire tout au long de la build, comme l'utilisation du tas et les statistiques de garbage collection. Des instantanés du tas seront également pris automatiquement lorsque l'utilisation de la mémoire approchera la limite configurée. +À partir de la version `14.2.0`, vous pouvez exécuter `next build --experimental-debug-memory-usage` pour lancer la build dans un mode où Next.js affichera en continu des informations sur l'utilisation de la mémoire tout au long de la build, comme l'utilisation du tas (heap) et les statistiques de garbage collection. Des instantanés du tas (heap snapshots) seront également pris automatiquement lorsque l'utilisation de la mémoire approchera la limite configurée. > **Bon à savoir** : Cette fonctionnalité n'est pas compatible avec l'option de worker de build Webpack qui est activée automatiquement sauf si vous avez une configuration Webpack personnalisée. -## Enregistrer un profil de tas +## Enregistrer un profil de tas (heap) Pour rechercher des problèmes de mémoire, vous pouvez enregistrer un profil de tas depuis Node.js et le charger dans Chrome DevTools pour identifier les sources potentielles de fuites de mémoire. -Dans votre terminal, passez le flag `--heap-prof` à Node.js lors du démarrage de votre build Next.js : +Dans votre terminal, passez le flag `--heap-prof` à Node.js lors du lancement de votre build Next.js : ```sh node --heap-prof node_modules/next/dist/bin/next build @@ -42,7 +42,7 @@ node --heap-prof node_modules/next/dist/bin/next build Dans Chrome DevTools, vous pouvez ouvrir l'onglet Mémoire et cliquer sur le bouton "Charger le profil" pour visualiser le fichier. -## Analyser un instantané du tas +## Analyser un instantané du tas (heap) Vous pouvez utiliser un outil d'inspection pour analyser l'utilisation de la mémoire de l'application. @@ -53,9 +53,9 @@ Si vous souhaitez interrompre avant que tout code utilisateur ne démarre, vous Lors de l'exécution dans ce mode, vous pouvez envoyer un signal `SIGUSR2` au processus à tout moment, et le processus prendra un instantané du tas. -L'instantané du tas sera enregistré dans la racine du projet de l'application Next.js et peut être chargé dans n'importe quel analyseur de tas, comme Chrome DevTools, pour voir quelle mémoire est retenue. Ce mode n'est pas encore compatible avec les workers de build Webpack. +L'instantané du tas sera enregistré dans la racine du projet de l'application Next.js et pourra être chargé dans n'importe quel analyseur de tas, comme Chrome DevTools, pour voir quelle mémoire est retenue. Ce mode n'est pas encore compatible avec les workers de build Webpack. -Voir [comment enregistrer et analyser des instantanés du tas](https://developer.chrome.com/docs/devtools/memory-problems/heap-snapshots) pour plus d'informations. +Consultez [comment enregistrer et analyser des instantanés du tas (heap snapshots)](https://developer.chrome.com/docs/devtools/memory-problems/heap-snapshots) pour plus d'informations. ## Worker de build Webpack @@ -69,8 +69,7 @@ Si vous utilisez une version plus ancienne de Next.js ou si vous avez une config ## Désactiver le cache Webpack -Le [cache Webpack](https://webpack.js.org/configuration/cache/) sauvegarde les modules Webpack générés en mémoire et/ou sur disque pour améliorer la vitesse des builds. Cela peut -aider pour les performances, mais cela augmentera également l'utilisation de la mémoire de votre application pour stocker les données en cache. +Le [cache Webpack](https://webpack.js.org/configuration/cache/) sauvegarde les modules Webpack générés en mémoire et/ou sur disque pour améliorer la vitesse des builds. Cela peut aider pour les performances, mais cela augmentera également l'utilisation de la mémoire de votre application pour stocker les données en cache. Vous pouvez désactiver ce comportement en ajoutant une [configuration Webpack personnalisée](/docs/app/api-reference/config/next-config-js/webpack) à votre application : @@ -86,7 +85,7 @@ const nextConfig = { type: 'memory', }) } - // Important : retournez la configuration modifiée + // Important : retourner la configuration modifiée return config }, } @@ -96,8 +95,8 @@ export default nextConfig ## Désactiver l'analyse statique -La vérification des types et le linting peuvent nécessiter beaucoup de mémoire, surtout dans les grands projets. -Cependant, la plupart des projets ont un runner CI dédié qui s'occupe déjà de ces tâches. +La vérification des types (typechecking) et le linting peuvent nécessiter beaucoup de mémoire, surtout dans les grands projets. +Cependant, la plupart des projets ont un runner CI dédié qui gère déjà ces tâches. Lorsque la build produit des problèmes de mémoire insuffisante pendant l'étape "Linting et vérification des types", vous pouvez désactiver ces tâches pendant les builds : ```js filename="next.config.mjs" @@ -105,13 +104,13 @@ Lorsque la build produit des problèmes de mémoire insuffisante pendant l'étap const nextConfig = { eslint: { // Attention : Cela permet aux builds de production de se terminer avec succès même si - // votre projet a des erreurs ESLint. + // votre projet contient des erreurs ESLint. ignoreDuringBuilds: true, }, typescript: { // !! ATTENTION !! // Permet dangereusement aux builds de production de se terminer avec succès même si - // votre projet a des erreurs de type. + // votre projet contient des erreurs de type. // !! ATTENTION !! ignoreBuildErrors: true, }, @@ -124,7 +123,7 @@ export default nextConfig - [ESLint dans la configuration Next.js](/docs/pages/api-reference/config/next-config-js/eslint) Gardez à l'esprit que cela peut produire des déploiements défectueux en raison d'erreurs de type ou de problèmes de linting. -Nous recommandons fortement de ne promouvoir les builds en production qu'après que l'analyse statique ait été terminée. +Nous recommandons fortement de ne promouvoir les builds en production qu'après que l'analyse statique ait été complétée. Si vous déployez sur Vercel, vous pouvez consulter le [guide pour les déploiements de staging](https://vercel.com/docs/deployments/managing-deployments#staging-and-promoting-a-production-deployment) pour apprendre comment promouvoir les builds en production après que les tâches personnalisées aient réussi. ## Désactiver les source maps @@ -137,4 +136,37 @@ Vous pouvez désactiver la génération de source maps en ajoutant `productionBr ## Problèmes de mémoire avec Edge -Next.js `v14.1.3` a corrigé un problème de mémoire lors de l'utilisation du runtime Edge. Veuillez mettre à jour vers cette version (ou une version ultérieure) pour voir si cela résout votre problème. \ No newline at end of file +Next.js `v14.1.3` a corrigé un problème de mémoire lors de l'utilisation du runtime Edge. Veuillez mettre à jour vers cette version (ou une version ultérieure) pour voir si cela résout votre problème. + +## Préchargement des entrées + +Lorsque le serveur Next.js démarre, il précharge les modules JavaScript de chaque page en mémoire, plutôt qu'au moment de la requête. + +Cette optimisation permet des temps de réponse plus rapides, en échange d'une empreinte mémoire initiale plus importante. + +Pour désactiver cette optimisation, définissez le flag `experimental.preloadEntriesOnStart` sur `false`. + +```ts filename="next.config.ts" switcher +import type { NextConfig } from 'next' + +const config: NextConfig = { + experimental: { + preloadEntriesOnStart: false, + }, +} + +export default config +``` + +```js filename="next.config.mjs" switcher +/** @type {import('next').NextConfig} */ +const config = { + experimental: { + preloadEntriesOnStart: false, + }, +} + +export default config +``` + +Next.js ne décharge pas ces modules JavaScript, ce qui signifie que même avec cette optimisation désactivée, l'empreinte mémoire de votre serveur Next.js finira par être la même si toutes les pages sont finalement demandées. \ No newline at end of file diff --git a/apps/docs/content/fr/docs/01-app/05-api-reference/04-functions/generate-metadata.mdx b/apps/docs/content/fr/docs/01-app/05-api-reference/04-functions/generate-metadata.mdx index fa6f3300..03cecb89 100644 --- a/apps/docs/content/fr/docs/01-app/05-api-reference/04-functions/generate-metadata.mdx +++ b/apps/docs/content/fr/docs/01-app/05-api-reference/04-functions/generate-metadata.mdx @@ -1,8 +1,8 @@ --- -source-updated-at: 2025-06-01T01:32:20.000Z -translation-updated-at: 2025-06-02T20:15:20.998Z +source-updated-at: 2025-06-05T15:29:30.000Z +translation-updated-at: 2025-06-06T16:58:55.363Z title: generateMetadata -description: Apprenez comment ajouter des métadonnées à votre application Next.js pour améliorer l'optimisation pour les moteurs de recherche (SEO) et le partage sur le web. +description: Apprenez à ajouter des métadonnées à votre application Next.js pour améliorer l'optimisation pour les moteurs de recherche (SEO) et le partage web. related: title: Prochaines étapes description: Consultez toutes les options de l'API Metadata. @@ -15,7 +15,7 @@ Vous pouvez utiliser l'objet `metadata` ou la fonction `generateMetadata` pour d ## L'objet `metadata` -Pour définir des métadonnées statiques, exportez un objet [`Metadata`](#champs-de-metadonnées) depuis un fichier `layout.js` ou `page.js`. +Pour définir des métadonnées statiques, exportez un objet [`Metadata`](#champs-de-métadonnées) depuis un fichier `layout.js` ou `page.js`. ```tsx filename="layout.tsx | page.tsx" switcher import type { Metadata } from 'next' @@ -37,11 +37,11 @@ export const metadata = { export default function Page() {} ``` -> Voir les [Champs de métadonnées](#champs-de-metadonnées) pour une liste complète des options prises en charge. +> Consultez les [Champs de métadonnées](#champs-de-métadonnées) pour une liste complète des options prises en charge. ## La fonction `generateMetadata` -Les métadonnées dynamiques, qui dépendent d'**informations dynamiques** telles que les paramètres de route actuels, des données externes ou les `metadata` des segments parents, peuvent être définies en exportant une fonction `generateMetadata` qui retourne un objet [`Metadata`](#champs-de-metadonnées). +Les métadonnées dynamiques, qui dépendent d'**informations dynamiques** telles que les paramètres de route actuels, des données externes ou les `metadata` des segments parents, peuvent être définies en exportant une fonction `generateMetadata` qui renvoie un objet [`Metadata`](#champs-de-métadonnées). ```tsx filename="app/products/[id]/page.tsx" switcher import type { Metadata, ResolvingMetadata } from 'next' @@ -105,7 +105,7 @@ export default function Page({ params, searchParams }) {} > - Vous ne pouvez pas exporter à la fois l'objet `metadata` et la fonction `generateMetadata` depuis le même segment de route. > - Les requêtes `fetch` à l'intérieur de `generateMetadata` sont automatiquement [mémoïsées](/docs/app/deep-dive/caching#request-memoization) pour les mêmes données entre `generateMetadata`, `generateStaticParams`, les Layouts, les Pages et les composants serveur. > - La fonction React [`cache` peut être utilisée](/docs/app/deep-dive/caching#react-cache-function) si `fetch` n'est pas disponible. -> - Les [métadonnées basées sur les fichiers](/docs/app/api-reference/file-conventions/metadata) ont la priorité la plus élevée et remplaceront l'objet `metadata` et la fonction `generateMetadata`. +> - Les [métadonnées basées sur les fichiers](/docs/app/api-reference/file-conventions/metadata) ont une priorité plus élevée et écraseront l'objet `metadata` et la fonction `generateMetadata`. ## Référence @@ -114,7 +114,8 @@ export default function Page({ params, searchParams }) {} La fonction `generateMetadata` accepte les paramètres suivants : - `props` - Un objet contenant les paramètres de la route actuelle : - - `params` - Un objet contenant les [paramètres de route dynamique](/docs/app/api-reference/file-conventions/dynamic-routes) depuis le segment racine jusqu'au segment où `generateMetadata` est appelée. Exemples : + + - `params` - Un objet contenant les [paramètres de route dynamiques](/docs/app/api-reference/file-conventions/dynamic-routes) depuis le segment racine jusqu'au segment où `generateMetadata` est appelé. Exemples : | Route | URL | `params` | | ------------------------------- | ----------- | ------------------------- | @@ -132,15 +133,15 @@ La fonction `generateMetadata` accepte les paramètres suivants : - `parent` - Une promesse des métadonnées résolues des segments de route parents. -### Retour +### Valeur de retour -`generateMetadata` doit retourner un objet [`Metadata`](#champs-de-metadonnées) contenant un ou plusieurs champs de métadonnées. +`generateMetadata` doit renvoyer un objet [`Metadata`](#champs-de-métadonnées) contenant un ou plusieurs champs de métadonnées. > **Bon à savoir** : > > - Si les métadonnées ne dépendent pas d'informations dynamiques, elles doivent être définies en utilisant l'objet statique [`metadata`](#lobjet-metadata) plutôt que `generateMetadata`. > - Les requêtes `fetch` sont automatiquement [mémoïsées](/docs/app/deep-dive/caching#request-memoization) pour les mêmes données entre `generateMetadata`, `generateStaticParams`, les Layouts, les Pages et les composants serveur. La fonction React [`cache` peut être utilisée](/docs/app/deep-dive/caching#react-cache-function) si `fetch` n'est pas disponible. -> - `searchParams` n'est disponible que dans les segments `page.js`. +> - `searchParams` est uniquement disponible dans les segments `page.js`. > - Les méthodes Next.js [`redirect()`](/docs/app/api-reference/functions/redirect) et [`notFound()`](/docs/app/api-reference/functions/not-found) peuvent également être utilisées dans `generateMetadata`. ### Champs de métadonnées @@ -149,7 +150,7 @@ Les champs suivants sont pris en charge : #### `title` -L'attribut `title` est utilisé pour définir le titre du document. Il peut être défini comme une simple [chaîne](#string) ou un [objet template](#template) optionnel. +L'attribut `title` est utilisé pour définir le titre du document. Il peut être défini comme une simple [chaîne de caractères](#string) ou un [objet de modèle](#template) optionnel. ##### String @@ -285,7 +286,7 @@ export const metadata = { > > - `layout.js` > -> - `title` (string) et `title.default` définissent le titre par défaut pour les segments enfants (qui ne définissent pas leur propre `title`). Ils augmenteront le `title.template` du segment parent le plus proche s'il existe. +> - `title` (string) et `title.default` définissent le titre par défaut pour les segments enfants (qui ne définissent pas leur propre `title`). Il augmentera le `title.template` du segment parent le plus proche s'il existe. > - `title.absolute` définit le titre par défaut pour les segments enfants. Il ignore le `title.template` des segments parents. > - `title.template` définit un nouveau modèle de titre pour les segments enfants. > @@ -344,8 +345,8 @@ export const metadata = { `metadataBase` est une option pratique pour définir un préfixe d'URL de base pour les champs `metadata` qui nécessitent une URL complète. -- `metadataBase` permet aux champs `metadata` basés sur des URL définis dans le **segment de route actuel et les segments inférieurs** d'utiliser un **chemin relatif** au lieu d'une URL absolue normalement requise. -- Le chemin relatif du champ sera composé avec `metadataBase` pour former une URL complète. +- `metadataBase` permet aux champs `metadata` basés sur les URL définis dans le **segment de route actuel et en dessous** d'utiliser un **chemin relatif** au lieu d'une URL absolue autrement requise. +- Le chemin relatif du champ sera combiné avec `metadataBase` pour former une URL complète. ```jsx filename="layout.js | page.js" export const metadata = { @@ -372,19 +373,19 @@ export const metadata = { > **Bon à savoir** : > -> - `metadataBase` est généralement défini dans le fichier racine `app/layout.js` pour s'appliquer aux champs `metadata` basés sur des URL dans toutes les routes. -> - Tous les champs `metadata` basés sur des URL qui nécessitent des URL absolues peuvent être configurés avec une option `metadataBase`. -> - `metadataBase` peut contenir un sous-domaine, par exemple `https://app.acme.com`, ou un chemin de base, par exemple `https://acme.com/start/from/here`. +> - `metadataBase` est généralement défini dans le fichier racine `app/layout.js` pour s'appliquer aux champs `metadata` basés sur les URL dans toutes les routes. +> - Tous les champs `metadata` basés sur les URL qui nécessitent des URL absolues peuvent être configurés avec une option `metadataBase`. +> - `metadataBase` peut contenir un sous-domaine, par exemple `https://app.acme.com` ou un chemin de base, par exemple `https://acme.com/start/from/here`. > - Si un champ `metadata` fournit une URL absolue, `metadataBase` sera ignoré. -> - L'utilisation d'un chemin relatif dans un champ `metadata` basé sur une URL sans configuration de `metadataBase` provoquera une erreur de build. +> - L'utilisation d'un chemin relatif dans un champ `metadata` basé sur les URL sans configurer de `metadataBase` entraînera une erreur de build. > - Next.js normalisera les barres obliques doubles entre `metadataBase` (par exemple `https://acme.com/`) et un champ relatif (par exemple `/path`) en une seule barre oblique (par exemple `https://acme.com/path`). #### Composition d'URL -La composition d'URL favorise l'intention du développeur par rapport à la sémantique de parcours de répertoire par défaut. +La composition d'URL privilégie l'intention du développeur par rapport à la sémantique de parcours de répertoire par défaut. - Les barres obliques finales entre `metadataBase` et les champs `metadata` sont normalisées. -- Un chemin "absolu" dans un champ `metadata` (qui normalement remplacerait tout le chemin de l'URL) est traité comme un chemin "relatif" (commençant à partir de la fin de `metadataBase`). +- Un chemin "absolu" dans un champ `metadata` (qui remplacerait normalement tout le chemin de l'URL) est traité comme un chemin "relatif" (commençant à partir de la fin de `metadataBase`). Par exemple, avec le `metadataBase` suivant : @@ -420,7 +421,7 @@ Tous les champs `metadata` qui héritent du `metadataBase` ci-dessus et définis export const metadata = { openGraph: { title: 'Next.js', - description: 'Le Framework React pour le Web', + description: 'The React Framework for the Web', url: 'https://nextjs.org', siteName: 'Next.js', images: [ @@ -456,7 +457,7 @@ export const metadata = { ```html filename=" output" hideLineNumbers - + @@ -478,7 +479,7 @@ export const metadata = { export const metadata = { openGraph: { title: 'Next.js', - description: 'Le Framework React pour le Web', + description: 'The React Framework for the Web', type: 'article', publishedTime: '2023-01-01T00:00:00.000Z', authors: ['Seb', 'Josh'], @@ -488,7 +489,7 @@ export const metadata = { ```html filename=" output" hideLineNumbers - + @@ -497,7 +498,7 @@ export const metadata = { > **Bon à savoir** : > -> - Il peut être plus pratique d'utiliser l'[API de métadonnées basée sur les fichiers](/docs/app/api-reference/file-conventions/metadata/opengraph-image#image-files-jpg-png-gif) pour les images Open Graph. Plutôt que de devoir synchroniser l'export de configuration avec des fichiers réels, l'API basée sur les fichiers générera automatiquement les bonnes métadonnées pour vous. +> - Il peut être plus pratique d'utiliser l'[API Metadata basée sur les fichiers](/docs/app/api-reference/file-conventions/metadata/opengraph-image#image-files-jpg-png-gif) pour les images Open Graph. Plutôt que de devoir synchroniser l'export de configuration avec des fichiers réels, l'API basée sur les fichiers générera automatiquement les métadonnées correctes pour vous. ### `robots` @@ -531,7 +532,7 @@ export const metadata: Metadata = { ### `icons` -> **Bon à savoir** : Nous recommandons d'utiliser l'[API de métadonnées basée sur les fichiers](/docs/app/api-reference/file-conventions/metadata/app-icons#image-files-ico-jpg-png) pour les icônes lorsque c'est possible. Plutôt que de devoir synchroniser l'export de configuration avec des fichiers réels, l'API basée sur les fichiers générera automatiquement les bonnes métadonnées pour vous. +> **Bon à savoir** : Nous recommandons d'utiliser l'[API Metadata basée sur les fichiers](/docs/app/api-reference/file-conventions/metadata/app-icons#image-files-ico-jpg-png) pour les icônes lorsque c'est possible. Plutôt que de devoir synchroniser l'export de configuration avec des fichiers réels, l'API basée sur les fichiers générera automatiquement les métadonnées correctes pour vous. ```jsx filename="layout.js | page.js" export const metadata = { @@ -626,14 +627,14 @@ export const metadata = { La spécification Twitter est (étonnamment) utilisée pour plus que X (anciennement connu sous le nom de Twitter). -En savoir plus sur la [référence de balisage Twitter Card](https://developer.x.com/en/docs/twitter-for-websites/cards/overview/markup). +En savoir plus sur la [référence du balisage Twitter Card](https://developer.x.com/en/docs/twitter-for-websites/cards/overview/markup). ```jsx filename="layout.js | page.js" export const metadata = { twitter: { card: 'summary_large_image', title: 'Next.js', - description: 'Le Framework React pour le Web', + description: 'The React Framework for the Web', siteId: '1467726470533754880', creator: '@nextjs', creatorId: '1467726470533754880', @@ -648,7 +649,7 @@ export const metadata = { - + ``` @@ -657,13 +658,13 @@ export const metadata = { twitter: { card: 'app', title: 'Next.js', - description: 'Le Framework React pour le Web', + description: 'The React Framework for the Web', siteId: '1467726470533754880', creator: '@nextjs', creatorId: '1467726470533754880', images: { url: 'https://nextjs.org/og.png', - alt: 'Logo Next.js', + alt: 'Next.js Logo', }, app: { name: 'twitter_app', @@ -686,10 +687,10 @@ export const metadata = { - + - + @@ -980,11 +981,11 @@ export const metadata = { ### Métadonnées non prises en charge -Les types de métadonnées suivants ne sont actuellement pas pris en charge nativement. Cependant, ils peuvent toujours être rendus dans le layout ou la page elle-même. +Les types de métadonnées suivants ne sont actuellement pas pris en charge de manière intégrée. Cependant, ils peuvent toujours être rendus dans le layout ou la page elle-même. ### Types -Vous pouvez ajouter une sécurité de type à vos métadonnées en utilisant le type `Metadata`. Si vous utilisez le [plugin TypeScript intégré](/docs/app/api-reference/config/typescript) dans votre IDE, vous n'avez pas besoin d'ajouter manuellement le type, mais vous pouvez toujours l'ajouter explicitement si vous le souhaitez. +Vous pouvez ajouter une sécurité de typage à vos métadonnées en utilisant le type `Metadata`. Si vous utilisez le [plugin TypeScript intégré](/docs/app/api-reference/config/typescript) dans votre IDE, vous n'avez pas besoin d'ajouter manuellement le type, mais vous pouvez toujours l'ajouter explicitement si vous le souhaitez. #### Objet `metadata` @@ -1022,7 +1023,7 @@ export async function generateMetadata(): Promise { } ``` -##### Avec les props de segment +##### Avec les propriétés de segment ```tsx filename="layout.tsx | page.tsx" import type { Metadata } from 'next' @@ -1058,7 +1059,7 @@ export async function generateMetadata( ##### Projets JavaScript -Pour les projets JavaScript, vous pouvez utiliser JSDoc pour ajouter une sécurité de type. +Pour les projets JavaScript, vous pouvez utiliser JSDoc pour ajouter une sécurité de typage. ```js filename="layout.js | page.js" /** @type {import("next").Metadata} */ @@ -1070,14 +1071,14 @@ export const metadata = { | Métadonnées | Recommandation | | ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `` | Utilisez les en-têtes HTTP appropriés via [`redirect()`](/docs/app/api-reference/functions/redirect), [Middleware](/docs/app/building-your-application/routing/middleware#nextresponse), [Security Headers](/docs/app/api-reference/config/next-config-js/headers) | -| `` | Affichez la balise dans le layout ou la page elle-même. | -| `