Next.js vs Node.js : quel lien entre les deux ?

Next.js vs Node.js : framework contre runtime, expliqué | We.Inc

Node.js exécute JavaScript hors du navigateur ; Next.js est un framework React qui tourne par-dessus. Découvrez la pile couche par couche, un même endpoint écrit dans les deux, et quand utiliser lequel.

Node.js est un runtime : le programme qui exécute JavaScript sur un serveur ou sur votre ordinateur. Next.js est un framework React pour créer des sites web, et ses outils de build comme son serveur tournent sur Node.js. Le choix est donc rarement l'un ou l'autre. Toute app Next.js a besoin de Node.js en dessous, alors qu'une app Node.js n'a pas besoin de Next.js.

Runtime contre framework

Question

Ce que c'est
Runtime JavaScript
Framework React

Vous l'installez comme
Un programme sur la machine
Un paquet npm dans un projet

Crée des pages web ?
Seulement si vous écrivez ce code
Oui, avec routage et rendu intégrés

Gère HTTP ?
Avec node:http ou une librairie comme Express
Pages plus Route Handlers

Dépend de l'autre ?
Non
Oui, Node.js 20.9 minimum

Démarrage en production
next build, puis next start

Le moyen le plus rapide de comprendre la relation est de regarder les couches que traverse une requête. Cliquez sur chaque couche d'une app Next.js typique ci-dessous pour voir son rôle et qui en est responsable.

Cliquez sur une couche, du navigateur en haut au système d'exploitation en bas.
Lisez le rôle de cette couche dans une app Next.js.
Comparez plus bas l'exemple de serveur Node.js simple et celui du Route Handler Next.js.
Utilisez les lignes de décision du tableau pour choisir ce dont votre projet a besoin.

Vérifiez node --version avant d'installer Next.js. La documentation actuelle indique Node.js 20.9 comme minimum.
Utilisez une version LTS (support à long terme) de Node.js sur vos serveurs, et fixez la même version majeure en local et en production.
Si votre projet ne sert qu'une API sans pages web, un serveur Node.js simple ou un framework backend est plus léger que Next.js.
Un export statique d'un site Next.js n'a besoin de Node.js qu'au moment du build. Le résultat est un ensemble de fichiers simples que n'importe quel serveur web peut héberger, au prix des fonctionnalités réservées au serveur.

Questions fréquentes

Next.js est-il un backend ou un frontend ?

Les deux, dans certaines limites. Il rend des pages React sur le serveur, envoie les parties interactives au navigateur et vous permet d'écrire des Route Handlers pour des endpoints JSON. Il n'est pas conçu pour être un backend complet au service de nombreux autres clients.

Dois-je apprendre Node.js avant Next.js ?

Il vous faut Node.js installé et une certaine aisance avec npm et le terminal. Une connaissance approfondie du module node:http n'est pas nécessaire, car Next.js gère le serveur pour vous.

Next.js a-t-il encore un Edge Runtime ?

L'option de route runtime indique désormais 'nodejs' par défaut et 'edge' comme obsolète. La documentation demande de retirer l'export runtime des fichiers de route, donc le nouveau code doit partir du principe que c'est Node.js.

Puis-je faire tourner Next.js avec Bun ou Deno ?

La documentation de déploiement de Next.js cite Bun comme adaptateur vérifié et Deno Deploy parmi d'autres plateformes disposant de leur propre intégration. La prise en charge des fonctionnalités varie hors du serveur Node.js, consultez donc les notes de la plateforme.

Express est-il le même genre d'outil que Next.js ?

Plus proche que Node.js, puisque les deux sont des librairies au-dessus de Node.js. Express est une boîte à outils minimale de serveur HTTP ; Next.js est un framework web complet construit autour de React.

Node.js en un paragraphe

Le site de Node.js le décrit comme un runtime JavaScript asynchrone piloté par les événements, conçu pour créer des applications réseau évolutives. En pratique, il permet à JavaScript de lire des fichiers, d'ouvrir des ports réseau et de communiquer avec des bases de données, ce qu'un navigateur n'autorise pas.

Ce que Next.js ajoute par-dessus

Next.js transforme un dossier de composants React en site : routes basées sur les fichiers, rendu serveur, récupération de données, gestion des images et des polices, et un serveur de production. Quand vous lancez next start, ce serveur est un processus Node.js, et la documentation précise que ce déploiement prend en charge toutes les fonctionnalités de Next.js.
En développement, c'est pareil pour next dev, et next build s'exécute sur Node.js pour compiler et prérendre les pages.

Choisir pour un projet

Vous créez un site ou une app web avec React ? Utilisez Next.js, et acceptez Node.js comme partie de l'installation. Vous créez un outil en ligne de commande, un worker qui traite une file d'attente ou une API pure ? Écrivez-le directement pour Node.js ou avec un framework backend, et laissez Next.js de côté.

Serveur Node.js simple

N'utilise que le module intégré node:http. Vous décidez vous-même du port, des en-têtes et du routage. Lancez-le avec node server.mjs.

Route Handler Next.js

Le chemin du fichier devient /api/hello et Next.js fait tourner le serveur. Les chemins inconnus reçoivent automatiquement la page 404 du framework.

Où Node.js intervient dans un projet Next.js

Scripts de package.json

Chaque script lance un processus Node.js : le serveur de développement, le build de production et le serveur de production.

Navigateur

Le visiteur

Reçoit le HTML que Next.js a rendu sur le serveur, puis ne charge du JavaScript que pour les Client Components afin que boutons et formulaires fonctionnent.

Le code de votre app

Vous

Pages, layouts et Route Handlers dans le dossier app. C'est du React plus quelques conventions Next.js, écrit en JavaScript ou en TypeScript.

Le framework

Associe les dossiers aux URL, rend les Server Components, regroupe le code client et fait tourner le serveur de production lancé par next start.

Le runtime

Exécute tout le JavaScript ci-dessus sur le serveur : le build, le serveur de développement et chaque requête en production.

Système d'exploitation

Votre hébergeur

macOS, Windows, Linux ou un conteneur. Next.js indique macOS, Windows (WSL compris) et Linux comme pris en charge pour le développement.