React est une bibliothèque JavaScript pour créer des interfaces utilisateur. Next.js est un framework qui encapsule React et y ajoute le routage, le rendu côté serveur, la génération statique et l'optimisation des performances. Toute application Next.js est une application React ; les deux sont complémentaires, et non concurrents.
Ce que fait React
React se concentre sur une seule chose : le rendu des interfaces utilisateur via des composants réutilisables. Il gère l'état, traite les événements et met à jour le DOM efficacement. Seul, React effectue tout le rendu dans le navigateur. Le serveur envoie un fichier HTML minimal et un bundle JavaScript ; React construit ensuite l'interface côté client.
Cela fonctionne bien pour les outils interactifs, les tableaux de bord et les applications protégées par authentification, où la visibilité dans les moteurs de recherche n'est pas une exigence. React n'inclut pas de routage, de conventions pour la récupération de données ni de pipeline de build prêts à l'emploi ; les développeurs assemblent donc ces éléments séparément à l'aide de bibliothèques telles que React Router, React Query, ou un bundler de leur choix.
Pour le mobile, React Native partage le modèle de composants de React, mais cible iOS et Android plutôt que le navigateur. Il s'agit d'un runtime distinct de React ou Next.js pour le web. Voir avantages et inconvénients de React Native pour le développement mobile pour une comparaison plus complète.
Ce qu'apporte Next.js
Next.js conserve toutes les capacités de React et y ajoute un framework complet. Les principaux apports sont :
Routage basé sur les fichiers. Un fichier de composant placé dans le répertoire pages (ou app) devient automatiquement une route. Un fichier about.js crée la route /about. Une logique de routage personnalisée reste possible, mais le cas courant ne nécessite aucune configuration.
Plusieurs stratégies de rendu. Là où React seul effectue toujours le rendu côté client, Next.js vous permet de choisir par page : - Le rendu côté serveur (SSR) génère la page à chaque requête, garantissant que les utilisateurs voient des données fraîches. - La génération statique (SSG) produit le HTML au moment du build, idéale pour les contenus qui changent rarement. - Le rendu côté client reste disponible là où c'est approprié.
Vous continuez à écrire des composants React standard avec des hooks, des props et du contexte. Next.js décide où et quand ces composants s'exécutent.
Optimisations intégrées. Next.js divise automatiquement le code par route, de sorte que les utilisateurs ne téléchargent que ce dont la page actuelle a besoin. Il optimise les images, sert des formats modernes et évite les décalages de mise en page liés aux polices. Les outils propres à React tels que React.memo et useMemo continuent de fonctionner en parallèle de ces optimisations au niveau du framework.
SEO. Étant donné que les pages générées côté serveur ou statiquement arrivent dans le navigateur déjà complètes, les robots des moteurs de recherche peuvent indexer le contenu sans exécuter de JavaScript. Pour les sites à fort contenu comme les blogs, la documentation ou le commerce en ligne, c'est une différence pratique significative par rapport à une configuration React purement côté client.
Comparaison du routage
React lui-même n'impose aucune structure de routage, ce qui offre une flexibilité totale mais exige des choix délibérés. Next.js propose le routage comme fonctionnalité de premier plan. Les deux approches conviennent à des situations différentes :
| Situation | Solution probable |
|---|---|
| Intégrer React dans une application existante | React avec React Router |
| Nouvelle application web nécessitant le SEO | Next.js |
| Outil interne ou tableau de bord protégé par connexion | React seul est souvent suffisant |
| Site complet avec pages publiques et données dynamiques | Next.js |
Expérience développeur
Démarrer un projet React seul implique de sélectionner et de configurer un bundler, un serveur de développement et des bibliothèques complémentaires. Cette flexibilité est précieuse dans des contraintes spécifiques.
npx create-next-app produit une application React avec le routage, un serveur de développement et des outils d'optimisation déjà configurés. La contrepartie est que Next.js prend des décisions structurelles à votre place. Pour la plupart des nouveaux projets nécessitant une application web avec des pages publiques, cette contrepartie représente un gain de temps de configuration significatif.
Les bibliothèques React tierces fonctionnent de façon identique dans les deux contextes. React Query, par exemple, se comporte de la même manière que le projet utilise Next.js ou React seul.
Quel choisir
Apprenez React en premier si vous débutez avec les deux. Les composants, les props, l'état, les effets et le contexte sont identiques dans tous les environnements React, et les comprendre facilite la prise en main de Next.js.
Commencez avec Next.js si vous savez déjà que vous avez besoin du rendu côté serveur, de la génération statique ou du routage basé sur les fichiers. Vous apprendrez React dans un environnement structuré qui prend en charge les problématiques de production dès le départ.
La question n'est pas React contre Next.js. Elle est de savoir si votre projet a besoin de ce que Next.js ajoute à React. Pour un résumé de la différence entre React et Next.js axé sur l'architecture, cet article couvre le modèle de rendu plus en profondeur.
Dans une équipe AI-native
Les agents de codage génèrent rapidement des structures Next.js, des arborescences de routage et des schémas de récupération de données, mais ils confondent fréquemment les conventions du Pages Router et de l'App Router, ou appliquent des schémas obsolètes issus d'anciennes versions de Next.js. Les ingénieurs qui travaillent avec des agents doivent vérifier que les composants serveur, les composants client et les configurations de cache générés correspondent à la version et à l'architecture réelles de Next.js du projet. La relecture du code généré par l'IA est particulièrement importante ici, car les erreurs de stratégie de rendu ne sont pas toujours évidentes à partir des seuls résultats de tests.
Ce que nous évaluons
Nous évaluons les connaissances en React et Next.js lors de deux sessions décrites sur la page comment nous évaluons. La première porte sur les fondamentaux, sans outils d'IA : l'ingénieur raisonne seul sur le cycle de vie des composants, la stratégie de rendu et le routage. La seconde est une évaluation AI-native : il utilise des agents de code et doit repérer les erreurs dans du code Next.js généré qu'il n'a pas écrit lui-même. Nous vérifions que les candidats savent lire le résultat d'un agent et l'analyser avec esprit critique, en plus de savoir rédiger les prompts.
Besoin d'engineers pour cela ?
Nous plaçons des ingénieurs seniors qui travaillent avec cela au quotidien : développeurs React, développeurs Next.js et ingénieurs frontend. Vous aurez une liste de candidats en cinq jours ouvrés.
Réponses courtes
Puis-je utiliser React sans Next.js ?
Oui. React fonctionne de manière indépendante en tant que bibliothèque d'interface utilisateur. Vous ajoutez votre propre routage, votre bundler et vos bibliothèques de récupération de données. Cela convient aux outils interactifs ou aux applications protégées par authentification, où le rendu côté serveur et le SEO ne sont pas des exigences.
Next.js est-il toujours préférable à React seul ?
Pas toujours. Next.js apporte une structure et des conventions qui conviennent aux applications web publiques nécessitant le référencement et des performances optimisées. Pour les tableaux de bord internes, les prototypes ou les projets ayant des exigences spécifiques en matière d'outillage, React seul avec les bibliothèques choisies peut être la solution la plus simple.
Next.js remplace-t-il React Router ?
Next.js propose son propre système de routage basé sur les fichiers, qui couvre la plupart des cas sans recourir à React Router. React Router peut tout de même être utilisé dans un projet Next.js si une logique de routage personnalisée est nécessaire, bien que cette combinaison soit peu courante.
