Next.js VS React.js : quel est le meilleur ?

React est une librairie Javascript créée en 2011. Une librairie signifie que seule, cette technologie vous offre uniquement des outils, des aides, pour la création d'une app web.

Next.js quant à lui est un framework apparu en 2016. Il s'appuie sur la librairie React pour vous offrir un cadre vous permettant de construire une application web complète avec notamment : le routage, l'optimisation des performances, la gestion des images, l'internationalisation...

L'objectif ici est de comparer Next.js et des applications qui pourraient être créées notamment grâce à create-react-app ou vite et vous aider à choisir.

Pourquoi utiliser Next.js plutôt que React ?

Installation

Sur l'installation en elle-même, React conseille explicitement d'utiliser un framework comme Next.js plutôt que React tel quel directement. Vous pouvez le constater sur l'encart présent ici.

A mesure que vous allez ajouter des pages et des fonctionnalités dans votre application React, vous allez faire grossir le bundle Javascript qui est distribué à vos utilisateurs.

Ce bundle va devenir de plus en plus important et risque de contribuer à rendre votre application de moins en moins performante.

Routage

Si vous souhaitez ajouter du routage dans votre application React, c'est à dire ne pas vous contenter d'une seule page, vous devrez sûrement installer une autre librairie comme react-router.

Il faudra encore configurer ce routage, gérer les pages 404, réfléchir à l'architecture, utiliser un hook pour récupérer les paramètres d'URL, séparer cette logique de votre application pour la rendre maintenable...

Du côté de Next.js, elle est prête dès l'installation ! Quand vous installerez une nouvelle application avec l'App Router (dernière version du routage), vous profiterez d'un système de routage basé sur les fichiers assez puissant.

Entre autre, pour créer une page, il ne vous suffira que de créer un nouveau dossier, avec un fichier page.jsx. Pour créer une route dynamique, le nom de votre dossier devra juste être entouré de [id]: le paramètre envoyé dans l'URL pourra être utilisé directement depuis votre composant page, dans les props, sans action supplémentaire !

Performance

Je souhaite vous détailler ici mes propos sur la comparaison des performances que vous pourrez retrouver entre React.js et Next.js.

Bundle Javascript

Chaque fois que vous allez créer un nouveau composant, vous allez produire du code Javascript.

Maintenant vont se retrouver 2 approches du traitement de ce code (simplifié) :

• Pour une application React standard, cela va produire un nouveau code Javascript à distribuer au client (vos utilisateurs, via un navigateur). Encore du poids à ajouter dans la rendu de vos pages.
• Pour une application comme Next.js, ce code va, selon vos choix, être utilisé pour générer un contenu HTML. Tout ce code va pouvoir être traité côté serveur, transformé en un rendu HTML. Simple, et efficace. Aucun poids supplémentaire et performances en moins pour vos utilisateurs.

Rendu des pages et des composants

Next.js vous laisse le choix, pour chacune de vos pages et même pour chacun de vos composants de choisir leur type de rendu.

Globalement, s'il s'agit d'un composant sans interactions ou utilisation de hooks ou de fonctions de cycle de vie, vous allez sûrement être amené à plutôt utiliser un composant serveur. Dans le cas contraire, un composant client.

Tout ce que vous coderez dans un composant serveur sera d'abord évalué dans un contexte serveur ce qui vous permettra d'utiliser des ressources back-end directement comme accéder à une base de données avec Prisma, garder des informations sensibles, appeler des API mises en cache...

Récupération de données

Sur la récupération des données et sur le cache, Next.js vous aide beaucoup. 

Chaque page que vous allez créer dans le framework seront par défaut des pages statiques. Les données de ces pages seront récupérées une première fois, mises en cache, et distribuées à vos utilisateurs.

Vous pouvez choisir à quel interval de temps vos données sont renouvelées avec une variable revalidate ou renouveler ses données depuis une API ou un service grâce aux fonctions revalidatePath et revalidateTag.

Next.js a étendu la fonction fetch que vous connaissez pour permettre d'y ajouter des options supplémentaires sur le cache : des tags pour vos requêtes ou préciser de manière unitaire quel est l'interval de revalidation des données.

Référencement naturel (SEO)

Qui dit performance, dit aussi expérience utilisateur, et donc référencement !

Toutes les améliorations de performances évoquées juste avant vont largement contribuer à améliorer votre référencement naturel. 

Metadata et generateMetadata

En plus de ça, Next.js a construit beaucoup d'outils pour vous permettre d'améliorer le référencement de votre application.

En utilisant pour vos pages des metadata (typiquement les métadonnées de vos pages), vous pourrez définir très facilement les balises title, meta description, openGraph, twitter cards...

Optimisation des images

A l'intérieur du framework, une librairie next/image vous permet de procéder à l'optimisation d'images, et vous pourrez notamment procéder à des améliorations sur :

• la qualité : réduire ou augmenter le paramètre de qualité des images pour optimiser leur poids
• la taille : avec les balises srcset pour distribuer le bon format d'image en fonction de la taille d'écran de l'utilisateur
• la priorité : pour charger une image en premier si elle se situe en haut de page dans un contenu par exemple

Routes API

Next.js se dit être un framework full-stack car en plus de pouvoir construire une interface, vous pouvez également créer des routes API (aussi appelée route handler).

Ces routes peuvent implémenter l'ensemble des verbes HTTP (GET, POST, PUT, PATCH, DELETE) et traiter des requêtes provenant de votre application ou de l'extérieur.

Un système de cache semblable à celui des pages peut être défini notamment pour les routes GET.

Variables d'environnement

Côté variables d'environnement, Next.js propose nativement les variables d'environnement défini dans des fichiers .env.

Seule les variables d'environnement préfixées par NEXT_PUBLIC_ seront exposées côté client (navigateur), les autres sont uniquement conservées sur l'environnement d'exécution Node.js. Ceci signifie que vous pouvez garder toutes les autres variables définies en sécurité comme les clefs API, tokens...

Autres points de comparaison entre React et Next

Les inconvénients du framework Next.js

Flexibilité

Après avoir créé quelques applications avec le framework, vous remarquerez que vous pouvez manquer de flexibilité sur certains points.

Next.js a la qualité et le défaut de vous proposer un écosystème restreint créé pour vous permettre de rendre vos applications les plus efficaces possibles.

Cependant, parfois, cet environnement peut manquer de flexibilité et vous pourriez vous retrouver bloquer pour une besoin spécifique auxquels les développeurs n'auraient pas pensé. Ce point pourrait être banal s'il pouvait être contourné facilement mais parfois ce n'est pas le cas.

Egalement, comme le framework publie beaucoup de mises à jour, vous pourriez être amené à ne plus pouvoir utiliser une autre librairie dans votre projet au fil de mises à jour et attendre qu'une mise à jour soit effectuée.

Bugs

Comme je l'évoquais, les mises à jour du framework étant souvent rapides et fréquentes, certains bugs peuvent apparaître au fur et à mesure.

Il est important pour ce point, surtout pour une application en production, d'attendre des fix pour les nouvelles mises à jour importantes qui surviendraient.

Egalement, pour éviter tous problèmes, veillez à ne pas utiliser des fonctionnalités qui pourraient être encore marquées comme alpha ou bêta.

Communauté

Bien que Next.js ai plus de 100 000 étoiles sur GitHub et soit extrêmement populaire, la communauté est toujours inférieure à celle de React.

Vous pourrez tout de même trouver de nombreux canaux d'échanges avec la communauté du framework comme leur Discord, le fil discussion de Next.js ou encore le canal r/Next.js de Reddit.

Cas d'usages selon l'application

Créer un blog ou site statique

Pour ce cas d'usage, c'est là que Next.js est le plus puissant ! Par son système de routage, sa politique de cache, rendu statique et serveur, c'est à coup sûr que votre blog ou votre application web statique sera beaucoup plus performant !

Next.js s'utilise facilement avec de nombreux CMS comme Strapi, Drupal, Contentful pour créer une application solide. 

Avec le rendu serveur, vous pourrez générer vos pages HTML au moment du build de votre application et éviter à vos utilisateurs tous ralentissements.

Le contexte d'exécution Node.js vous permettra de garder vos clés API en sécurité et faire des appels directement depuis votre site.

Avec les actions serveurs, vous pourrez créer n'importe quel formulaire sans avoir besoin de créer une API supplémentaire.

Créer un site e-commerce

Là encore, vous pourrez coupler votre application à Shopify par exemple (jetez un oeil au template Next.js commerce) et booster votre site e-commerce !

next/image vous aidera grandement à garder votre site performant même avec les nombreuses images de vos produits.

Le module metadata vous permettra de définir toutes les métadonnées de vos pages facilement.

Applications avec rendu client

Pour ce type d'application, je souhaite évoquer le type d'applications comme des intranet, applications avec un état global important (redux ou context), vous pourriez vous poser la question d'utiliser React directement sans Next.js.

En effet, l'avantage de Next.js pour ce genre d'application deviendrait minime. Mis à part le routage et certaines fonctionnalités, toutes les autres pourraient être inutiles par le fait que votre application doit être rendu côté client uniquement.

Dans ce cas précis, vous pouvez peser le pour et le contre pour l'utilisation du framework et les fonctionnalités futures pour votre application.