---
title: "Comment extraire un site Next.js en quelques secondes grâce aux données d'hydratation"
slug: web-scraping-with-next-js
date: 2026-02-22T07:21:54+00:00
modified: 2026-07-19T10:10:49+00:00
permalink: https://brightdata.fr/blog/savoir-faire/web-scraping-with-next-js
type: blog
---

[ Blog ](https://brightdata.fr/blog "Blog") / [How Tos](https://brightdata.fr/blog/savoir-faire)







 [How Tos](https://brightdata.fr/blog/savoir-faire)

# Comment extraire un site Next.js en quelques secondes grâce aux données d’hydratation

Découvrez des techniques efficaces de Scraping web pour les sites Next.js en tirant parti de React hydration dans ce tutoriel concis.

 4 min de lecture





 [ ![Antonello Zanini](https://media.brightdata.fr/2022/12/Antonello-Zanini-2-50x50.jpg) ](https://brightdata.com/blog/authors/antonello-zanini)

 [Antonello Zanini

Technical Writer

 ](https://brightdata.com/blog/authors/antonello-zanini)





 ![Scraping dynamic websites with next.js main image](https://media.brightdata.fr/2024/03/How-to-Scrape-with-Next.Js.svg)





Dans ce tutoriel sur les astuces pour scraper les sites Next.js, vous apprendrez :

- Qu’est-ce que Next et pourquoi est-il si populaire ?
- Pourquoi il est facile de scraper les pages web Next.js grâce au fonctionnement de React hydration
- Comment exploiter l’hydratation React pour le Scraping web

C’est parti !

## Qu’est-ce que Next.js et comment fonctionne-t-il ?

[Next.js](https://nextjs.org/) est un framework JavaScript basé sur React qui permet de créer des sites web rendus côté serveur et générés de manière statique. Il simplifie le processus de développement en fournissant une API riche et une approche structurée pour créer des applications React côté serveur.

Next.js a gagné en popularité au fil des ans, devenant la cinquième bibliothèque web la plus utilisée [selon Statista](https://www.statista.com/statistics/1124699/worldwide-developer-survey-most-used-frameworks-web/). Cela s’explique par sa facilité d’utilisation, ses excellentes performances, ses similitudes avec React, sa documentation complète et le soutien de sa communauté. Il n’est donc pas étonnant que de nombreuses grandes entreprises et start-ups choisissent Next.js pour leurs besoins en matière de développement web.

À un niveau élevé, Next.js fonctionne en récupérant les données sur le serveur et en les transmettant aux composants React afin de créer des documents HTML pré-rendus. Ce processus améliore les performances en générant du contenu HTML sur le serveur, qui peut ensuite être envoyé au client pour un chargement initial plus rapide des pages.

## Comment tirer parti de React Hydration pour le Scraping web

[L’hydratation](https://blog.logrocket.com/react-hydration-pre-rendered-html/) comble le fossé entre le rendu côté serveur et côté client. Plus précisément, l’hydratation Next.js est le processus par lequel le document HTML généré par Next.js est converti en une application React côté client pleinement fonctionnelle.

Pendant l’hydratation, une fois que le navigateur a chargé la page HTML renvoyée par le serveur,[React ajoute de l’interactivité à la page](https://react.dev/reference/react-dom/client/hydrateRoot). Plus précisément, il ajoute des écouteurs d’événements et gère l’état dans les nœuds DOM qui correspondent aux composants React rendus sur le serveur.

Voici les étapes requises par React pour hydrater une page pré-rendue :

1. **Rendu initial du serveur**: le serveur génère le document HTML avec la représentation HTML des composants React utilisés sur la page.
2. **Exécution JavaScript côté client**: lorsque le client reçoit le balisage HTML, il exécute le bundle JavaScript contenant le code React.
3. **Réconciliation**: React compare le HTML renvoyé par le serveur avec la représentation DOM virtuelle générée à la volée. [Pour en savoir plus, consultez la documentation officielle](https://react.dev/learn/preserving-and-resetting-state).
4. **Hydratation**: si les deux sont identiques, React termine le rendu en ajoutant des gestionnaires d’événements et en gérant l’état tout en réutilisant autant que possible le DOM existant.

Pour effectuer cette opération, React a besoin des mêmes données que celles utilisées par le serveur pour générer le document HTML. C’est pourquoi Next.js ajoute certains éléments DOM spéciaux contenant les données props à la page générée.

Sur certains sites Next.js, vous pouvez trouver ces données dans l’élément `<script>` avec l’ID `__NEXT_DATA__`. Ce nœud DOM spécial contient des données au format JSON que React utilise pour l’hydratation, comme suit :

![Finding the  __NEXT_DATA__ ID](https://media.brightdata.fr/2024/03/finding-the-__next_data__id-1.png)Sur les sites Next.js récents qui utilisent le nouvel [App Router](https://nextjs.org/docs/app), les données d’hydratation sont plutôt stockées dans les appels de fonction `self.__next_f.push()` dans plusieurs nœuds `<script>`:

![self.__next_f.push() calls in script nodes](https://media.brightdata.fr/2024/03/self.__next_f.push-calls-in-script-nodes.png)Notez que ces nœuds peuvent contenir encore plus de données que celles affichées sur le site. Comment est-ce possible ? Parce que ces éléments d’hydratation stockent toutes les données API et de base de données récupérées du serveur pendant la génération de la page et transmises aux composants React. Cependant, tous les attributs de ces objets ne sont pas nécessairement accessibles et utilisables dans les composants.

Peu importe que vous compreniez ou non pourquoi ces données doivent être présentes pour que React fonctionne. Ce qui importe, c’est que les pages web générées via Next.js contiennent les données à afficher au format JSON dans des nœuds DOM spéciaux. Comme vous pouvez l’imaginer, cela a d’énormes implications pour le Scraping web avec Nex.js !

## Scraping des sites Next.js grâce aux données d’hydratation

Extraire des données d’une page créée dans Next.js est si facile que vous n’avez même pas besoin d’un script de scraping. Les DevTools de votre navigateur suffiront.

Voyons maintenant comment tirer parti de l’hydratation React pour scraper des sites Next.js en quelques secondes !

### **Extraction de données à partir de `__NEXT_DATA__`**

Supposons que vous ayez vérifié que la page cible à scraper est construite avec Next.js (découvrez comment dans la FAQ).

Maintenant, rendez-vous sur la page dans votre navigateur, cliquez avec le bouton droit de la souris et sélectionnez « Inspecter » pour accéder aux DevTools. Passez à l’onglet Console et exécutez la ligne JavaScript ci-dessous pour sélectionner l’élément `<script>` souhaité :

```none
`const scriptNode = document.querySelector("#__NEXT_DATA__")`
```

Cela utilisera la fonction [querySelector()](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) pour sélectionner l’élément dans le DOM avec l’ID \_\_NEXT\_DATA\_\_ et l’attribuer à la variable `scriptNode`.

Si vous tapez `scriptNode` dans la console et appuyez sur Entrée, vous obtiendrez le nœud souhaité :

![Typing scriptnode in console](https://media.brightdata.fr/2024/03/Typing-scriptnode-in-console.png)Accédez à son contenu HTML interne et[analysez-le en tant que contenu JSON](/blog/how-tos/parse-json-data-with-python)avec :

`const jsonData = JSON.parse(scriptNode.innerHTML)`

Et voilà ! L’objet `jsonData` contient désormais toutes les données utilisées par React pour afficher les composants sur la page :

![jsondata object with all the data](https://media.brightdata.fr/2024/03/json-data-object-with-all-the-data.png)Plus précisément, concentrez-vous sur le champ `pageProps` à l’intérieur de props :

```none
`jsonData.props.pageProps`
```

![The pageprops field in the console](https://media.brightdata.fr/2024/03/Focusing-on-the-pageprops-field-1.png)Ensuite, cliquez avec le bouton droit sur l’objet et sélectionnez l’option « Copier l’objet » :

![Copying the object from the console tab](https://media.brightdata.fr/2024/03/Copying-the-object.png)Enfin, créez un fichier data.json et collez-y le contenu souhaité !

Super ! Vous venez d’effectuer du Scraping web sur un site Next.js en moins d’une minute.

Assemblez le tout et vous obtiendrez ce script de scraping Next.js :

```none
const scriptNode = document.querySelector("#__NEXT_DATA__")

const jsonData = JSON.parse(scriptNode.innerHTML)

jsonData.props.pageProps
```

### **Récupération des données à partir des fonctions `self.__next_f.push`**

Next.js 13 a introduit l’App Router. Cela modifie la façon dont Next.js fournit les données à React pour l’hydratation. Dans ce cas, vous devez sélectionner tous les nœuds `<script>` qui contiennent la chaîne `self.__next_f.push`.

Une fois encore, rendez-vous sur la page cible dans le navigateur et accédez à la console. Lancez la commande ci-dessous pour sélectionner les nœuds `<script>`:

```none
`const scriptNodes = document.querySelectorAll("script")`
```

[`querySelectorAll()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) renvoie un objet `NodeList`. Convertissez-le en tableau avec `Array.from()` pour appliquer la méthode `filter()` et obtenir uniquement les nœuds qui vous intéressent :

```none
const hydrationScriptNodes = Array.from(scriptNodes).filter((e) => e.innerHTML.includes("self.__next_f.push"))
```

À présent, `hydrationScriptNodes` contiendra tous les éléments `<script>` d’hydratation de la page :

![the hydrationScriptNodes containing all hydration elements](https://media.brightdata.fr/2024/03/the-hydrationScriptNodes-containing-all-hydration-elements-1.png)Cependant, vous ne souhaitez généralement que le nœud qui possède l’attribut `initialTree`. C’est là que sont stockées toutes les données d’hydratation qui vous intéressent :

![Finding the hydration data of interest](https://media.brightdata.fr/2024/03/Finding-the-hydration-data-of-interest-1.png)Sélectionnez-les avec :

```none
`const scriptNode = hydrationScriptNodes.find((e) => e.innerHTML.includes("initialTree"))`
```

Ensuite, extrayez les données qui vous intéressent avec :

```none
`scriptNode.innerHTML`
```

Notez que les données récupérées contiennent les informations qui vous intéressent, mais nécessitent une analyse syntaxique supplémentaire. Vous pouvez les convertir dans un format plus lisible en ajoutant quelques lignes supplémentaires.

![converting the data to a more readable format](https://media.brightdata.fr/2024/03/converting-the-data-to-a-more-readable-format-1.png)Cette fois-ci, le script de scraping Next.js est :

```none
const scriptNodes = document.querySelectorAll("script")

const hydrationScriptNodes = Array.from(scriptNodes).filter((e) => e.innerHTML.includes("self.__next_f.push"))

const scriptNode = hydrationScriptNodes.find((e) => e.innerHTML.includes("initialTree"))

scriptNode.innerHTML
```

Félicitations ! Le scraping des sites Next.js n’a jamais été aussi facile !

## Limites de cette approche de scraping Next.js

Bien que cette approche de scraping basée sur les données d’hydratation React soit rapide et efficace, elle présente certaines limites. Les voici :

- **Données partielles**: les nœuds spéciaux `<SCRIPT>` ajoutés par Next.js ne contiennent que les données récupérées par le serveur et transmises aux composants React pendant l’hydratation. Il se peut que ces données ne correspondent pas à l’intégralité des données contenues dans la page. En effet, les composants React peuvent avoir des valeurs codées en dur ou récupérer d’autres données de manière dynamique via AJAX. Dans ce cas, vous devez effectuer le Scraping web à l’aide d’un outil [d’automatisation du navigateur](/blog/proxy-101/browser-automation-explained).
- **Analyse supplémentaire requise**: `self.__next_f.push` implique des données dans un format propriétaire, et il n’est pas toujours facile de les analyser correctement.
- **Nécessite des opérations manuelles**: à moins de traduire les scripts écrits ci-dessus en scripts de scraping en JavaScript, Python ou un langage similaire et d’intégrer la logique d’exportation des données, vous devez exporter les données manuellement dans un fichier texte. Pour en savoir plus, consultez notre [guide](/blog/how-tos/web-scraping-with-node-js) sur [le Scraping web avec JavaScript et Node.js.](/blog/how-tos/web-scraping-with-node-js)

## Conclusion

Dans cet article, vous avez découvert ce qu’est Next.js, pourquoi il s’agit de l’une des technologies les plus utilisées au monde pour la création de sites web et comment en extraire des données. Vous avez notamment compris qu’il repose sur l’hydratation React et ce que cela implique. De ce fait, les pages HTML renvoyées par le serveur contiennent déjà toutes les données dont vous avez besoin (et même au format JSON !). Cela rend le Scraping web des sites Next.js très facile.

Le véritable problème est ailleurs : être bloqué par les technologies anti-bot. Ces systèmes peuvent détecter et bloquer votre script de scraping automatisé. Heureusement, Bright Data vous propose plusieurs solutions efficaces :

- [**Web Scraper IDE**](/products/web-scraper/functions): un IDE cloud pour créer des scrapers web capables de contourner et d’éviter automatiquement tout blocage.
- **[Web Scraper API](/products/web-scraper)**: accédez facilement à des données web structurées par programmation, avec une disponibilité de 99,99 % et une évolutivité illimitée.
- [**Navigateur de scraping**](/products/scraping-browser): un navigateur contrôlable basé sur le cloud qui offre des capacités de rendu JavaScript tout en gérant les CAPTCHA, les empreintes digitales du navigateur, les réessais automatisés, et plus encore. Il s’intègre aux bibliothèques de navigateurs d’automatisation les plus populaires, telles que Playwright et Puppeteer.
- [**Web Unlocker**](/products/web-unlocker): une API de déverrouillage qui peut renvoyer de manière transparente le code HTML brut de n’importe quelle page, contournant ainsi toutes les mesures anti-scraping.

Vous ne voulez pas vous occuper du Scraping web, mais vous êtes toujours intéressé par les données en ligne ? [Découvrez les Jeux de données prêts à l’emploi de Bright Data !](/products/datasets)

## FAQ

**Est-il possible de masquer ou de supprimer \_\_NEXT\_DATA\_\_ du DOM dans Next.js ?**

Non, vous ne pouvez pas le supprimer ou le masquer. Si vous décidiez de supprimer l’élément `_NEXT_DATA_ <script>` du DOM, React ne pourrait pas s’hydrater. Comme les données de ce script sont nécessaires au bon fonctionnement de React, vous ne pouvez pas les supprimer sans vous attendre à un dysfonctionnement ou à une dégradation des fonctionnalités. Lisez la [discussion GitHub](https://github.com/vercel/next.js/discussions/13418) consacrée à ce sujet.

**Est-il possible de supprimer  les appelsself.\_\_next\_f.push du DOM ?**

Non, vous ne pouvez pas supprimer les appels `self.__next_f.push` dans les nœuds `<script>` ajoutés par Next.js. Ces éléments DOM sont ajoutés par le serveur pour permettre à l’application React côté client de s’hydrater et de fonctionner comme prévu. Pour plus de détails, consultez la [discussion GitHub](https://github.com/vercel/next.js/discussions/42170) consacrée à ce sujet.

**Comment savoir si un site est construit avec Next.js ?**

Il existe plusieurs façons de savoir si un site est construit avec Next.js. Tout d’abord, recherchez l’en-tête X-Powered-By défini par défaut par certaines versions de Next.js :

![checking the x-powered-by header](https://media.brightdata.fr/2024/03/checking-the-x-powered-by-header-1.png)Sinon, vérifiez si le DOM contient un nœud `<script id="__NEXT_DATA__" ... >` ou plusieurs nœuds `<script>self.__next_f.push(...)</script>`.

**Next.js est-il la seule technologie qui repose sur l’hydratation React ?**

Non, Next.js n’est pas la seule technologie qui repose sur l’hydratation React. D’autres générateurs de rendu côté serveur (SSR), tels que Gatsby, utilisent également l’hydratation React pour convertir le HTML rendu par le serveur en applications React interactives côté client. Ce processus est une approche courante dans le SSR avec React et ne se limite pas à Next.js.



Contacter ventesEssai gratuit![google social icon](/wp-content/themes/brightdata/assets/images/ic_google.svg)









 Table des matières







Dedicated Scraper APIs &amp; No-Code Scrapers

Over 1000 scrapers for all popular domains. Simplify your web scraping.

[See pricing](/pricing/web-scraper "See pricing")

Just want data? Skip scraping.

Hundreds of ready-to-use datasets from all popular domains.

[See pricing](/pricing/datasets "See pricing")







 [ ](https://news.ycombinator.com/submitlink?t=Comment+extraire+un+site+Next.js+en+quelques+secondes+gr%C3%A2ce+aux+donn%C3%A9es+d%26%238217%3Bhydratation&u=https://brightdata.fr/blog/savoir-faire/web-scraping-with-next-js) [ ](https://www.linkedin.com/shareArticle?mini=true&title=Comment+extraire+un+site+Next.js+en+quelques+secondes+gr%C3%A2ce+aux+donn%C3%A9es+d%26%238217%3Bhydratation&url=https://brightdata.fr/blog/savoir-faire/web-scraping-with-next-js) [ ](http://www.reddit.com/submit?title=Comment+extraire+un+site+Next.js+en+quelques+secondes+gr%C3%A2ce+aux+donn%C3%A9es+d%26%238217%3Bhydratation&url=https://brightdata.fr/blog/savoir-faire/web-scraping-with-next-js)







##  Vous pourriez aussi être intéressé par

 [ ![OpenHuman with Bright Data](https://media.brightdata.fr/2026/09/OpenHuman-with-Bright-Data.png) ](https://brightdata.fr/blog/ai/openhuman-with-bright-data "Accès Web Prêt pour la Production dans OpenHuman via le CLI Bright Data")

 [AI



 ![Antonello Zanini](https://media.brightdata.fr/2022/12/Antonello-Zanini-2-50x50.jpg)

Antonello Zanini

Technical Writer





### Accès Web Prêt pour la Production dans OpenHuman via le CLI Bright Data

Intégrez le CLI Bright Data avec OpenHuman pour permettre un accès web prêt pour la production et la collecte de données pour les agents IA.



 09-Sep-2026

 14 min de lecture

 ](https://brightdata.fr/blog/ai/openhuman-with-bright-data)

 [ ![Multimodal Web Scraping with MiniMax](https://media.brightdata.fr/2026/09/Multimodal-Web-Scraping-with-MiniMax.png) ](https://brightdata.fr/blog/donnees-web/multimodal-web-scraping-with-minimax "Scraping Web Multimodal avec MiniMax")

 [Données Web



 ![Antonello Zanini](https://media.brightdata.fr/2022/12/Antonello-Zanini-2-50x50.jpg)

Antonello Zanini

Technical Writer





### Scraping Web Multimodal avec MiniMax

Associez Bright Data Web Unlocker avec la vision MiniMax M3 pour extraire des données structurées à partir d’images et de captures d’écran de pages web.



 09-Sep-2026

 5 min de lecture

 ](https://brightdata.fr/blog/donnees-web/multimodal-web-scraping-with-minimax)

 [ ![The 10 Best CLI Tools for Codex in 2026](https://media.brightdata.fr/2026/08/The-10-Best-CLI-Tools-for-Codex-in-2026.png) ](https://brightdata.fr/blog/ai/best-cli-tools-for-codex "Les 10 meilleurs outils CLI pour Codex en 2026 – Testés & Classés")

 [AI



 ![Daniel Shashko](https://media.brightdata.fr/2022/04/Daniel-Shashko-2-50x50.png)

Daniel Shashko

Web Data &amp; AI Expert





### Les 10 meilleurs outils CLI pour Codex en 2026 – Testés &amp; Classés

Les 10 outils CLI qui rendent Codex plus rapide et plus capable, en commençant par le Bright Data CLI pour un accès web réel depuis l’intérieur du sandbox.



 06-Sep-2026

 24 min de lecture

 ](https://brightdata.fr/blog/ai/best-cli-tools-for-codex)