Practical Programming
NextJS

NEXT JS: Pourquoi j’ai choisi NEXT JS pour mon projet perso

Next JS, ce framework React orienté Server Side Rendering, s’est imposé parmi les frameworks JavaScript les plus populaire. Etant développeur NodeJS, il fallait que je prenne mes responsabilités et m’intéresser à ce framework dans le cadre de ma veille technique.

Pourquoi NextJS est le framework qui attire le plus les développeurs JavaScript en 2019 ?

Depuis 2019 je me suis installé à Lille. Parmi les trésors que cachent la région Nord, j’ai découvert le Welsh, une spécialité locale à base de cheddar fondu, de moutarde et de bière. De là est venu l’idée de ce projet perso. Une web app semblable à TripAdvisor pour trouver les meilleurs welsh de la région Lilloise.

Popularité de React et de ses frameworks.

Pour un projet web de très petite envergure tel que celui-ci, toutes les technos auraient pu être adapté. Cela faisait plus d’un an que je n’avais pas fait de développement Frontend et je n ‘avais pas d’avantage à utiliser un framework en particulier.

Sur le marché Français, React est le framework frontend le plus populaire. En tant que développeur JavaScript, développer mes compétences en React est important, même si je me spécialise sur le backend.

C’est pourquoi mon choix s’est orienté sur React et ses frameworks Next JS et Gatsby. VueJS et son framework Nuxt sont des alternatives intéressantes et sûrement tout aussi respectables mais le marché de l’emploi rend l’expérience React plus attractive.

NEXT JS offre une solution simple et tout en un

L’intérêt des frameworks JS tels que Next Js, Nuxt ou Gatsby est d’avoir le backend et le frontend sous le même toit.

Système de routes basé sur les fichiers

Next JS se base sur le file system node pour définir les routes frontend et backend de votre application. Pour chaque fichier JavaScript présent dans le répertoire Pages, Next JS crée la route frontend du même nom.

Deploiement en CLI et hébergement gratuit

L’avantage que procure NextJS est la simplicité de déploiement. Des services comme Vercel ou Netlify nous permettent de déployer l’application via le terminal et de bénéficier d’un CDN et d’un certificat SSL gratuitement.

L’intérêt du Static Site Generation et Server Side Rendering via Next JS

Un des critère les plus important aux yeux de Google et des internautes est la vitesse de chargement d’un site. Avec un temps de chargement optimisé, vous améliorez votre expérience utilisateur et en découle un meilleur référencement sur Google.

Dans l’industrie du SaaS, on distingue souvent les pages marketing, qui ont pour but de vendre le logiciel, de l’application en elle même qui souvent réside sur un sous-domaine. Par exemple, mon outil d’e-mailing Convertkit a toutes ses pages sur son domain racine, mais pour me connecter à mon interface, je dois me rendre sur app.converkit.com

Dans le cas d’applications derrière login, il n’y a aucun enjeu SEO et il y a beaucoup de données spécifiques à l’utilisateur à charger à chaque connexion . Dans ces cas là, l’utilisation d’une Single Page App directement en React, Vue ou Angular fait du sens.

En revanche, pour une application grande ouverte type TripAdvisor, on veut pouvoir être référencé pour plusieurs pages et l’utilisateur peut s’y connecter sans obligatoirement passer par un login. De plus, il n’y a aucune donnée spécifique à un utilisateur à afficher, ce ne sont que des données publiques. Dans ce cas, il est pertinent d’éviter les Single Page App qui effectuent le chargement chez le client pour gagner en vitesse et faire du Server Side Rendering ou du Static Site Generation.

Dans un projet comme le miens, on peut se demander l’intérêt d’utiliser Next js au lieu de faire directement tout le site en Node.js, PHP, Python ou tout autre langage de développement web pour renvoyer le HTML au navigateur.

Là encore, tout est une question d’optimisation et de trouver comment gratter des millisecondes de chargement. En effet, un des atout de Next JS et de ses confrères est de pouvoir générer un site statique.

En utilisant du Server Side Rendering, via du PHP par exemple, les variables de votre code sont remplacées au moment de la requête par le serveur. Il n’y a qu’une seule page “Restaurant.php” et en fonction du lien sur lequel vous avez cliqué le serveur va remplacer les variables par les bons noms en dur pour l’affichage de la page. Cela veut dire qu’à chaque requête, votre client interroge le serveur, celui-ci interroge la base de donnée, construit une page HTML et la retourne prête à l’emploi au navigateur.

Grâce au Static Site Generation, Next JS va créer toutes les pages que peut avoir le site en dur dès le build, c’est à dire au moment où vous codez votre site. Il y aura une page par restaurant qui sera déployé. L’avantage est que le serveur n’aura pas à construire la page à chaque requête, elle sera déjà prête à l’emploi. Elle pourra être mise en cache pour être servie d’autant plus rapidement. C’est la solution la plus rapide pour livrer une page web.

Cette solution n’est pas forcément adaptée à toutes les problématiques. Pour que le Static Site Generation soit pertinent, il faut que la grande majorité du contenu de la page évolue peu dans le temps et soit pas générique à toutes les requêtes. Dans mon cas, les pages sont statiques et ne bougent pas d’une requête à l’autre. Plus mon nombre de restaurant grandi, plus l’étape du “build” sera longue, mais c’est acceptable pour moi car je ne vais pas ajouter des restaurants toutes les 10 minutes. Cette solution ne serait pas acceptable dans le cas d’une application comme Twitter.

Est-ce que Next JS est fait pour toi

Pour conclure, Next JS ainsi que les autres frameworks de Static Site Generation sont pertinent pour toi si:

  1. Tu veux développer tes compétences Frontend en vue d’un futur job
  2. Ton projet web est grand public et propose des pages dont la majorité du contenu est statique

Les projets de blogs, site vitrine, e-commerce ou marketplace se prêtent très bien au Static Site Generation et méritent tous d’être sur cette techno. En revanche, les produits SaaS qui impliquent beaucoup de données personnalisée à l’utilisateur n’ont pas d’intérêt à utiliser Next.

Rayed Benbrahim

Rayed Benbrahim

Développeur freelance Node.JS depuis 2017, j'ai créé le media Practical programming afin d'aider les développeurs web dans l'avancé de leur carrière de débutant à senior.

12 commentaires

  • Bonjour, si c’est pour faire du landing page pourquoi ne pas juste prendre un apache/Nginx et mettre les pages statiques dedans ? Le choix de Next.js me paraît overkill.

    • Pour une landing page, oui pourquoi pas faire ça. Maintenant pour un blog ou un petit site marchand qui va reprendre de nombreuses fois la même page déclinée de multiples fois, un générateur de site statique est approprié

      • Je vais quand même me lancer dans le Next.js pour mon site e-commerce.
        J’ai toujours un peu de mal à voir quelles technos prendre en front vu que je suis backend. Si j’ai des soucis je regarderai sur ton blog 🙂

        Merci pour tes conseils.

  • Bonjour Rayed et merci pour cet article.

    Je développe actuellement un site avec Nextjs et cet article m’a mis le doute sur ma façon de procéder. Mon site se compose comme suit :
    –Une landing Page qui présente mes services avec quelques liens vers, le tout peut-être statique (donc Nextjs est très bien pour ce cas)
    — un backoffice ou je gère mes clients, leurs factures, je leur créer des programmes sportifs et nutritionnels, etc … Bref une vraie APP.

    Pour le moment je gère tout en Nextjs sur un seul projet, de la landing page au back office, et j’utilise l’API Nextjs avec un serveur Nodejs et une BDD Mongo Atlas. Je commence à me demander sérieusement si je ne devrais pas séparer le projet en deux : Nextjs pour la Landing (qui a besoin d’un bon SEO) et le back office simplement sur du REACT ? J’aurais donc plusieurs questions :

    — Comment se passe l’hébergement ? Peut-on héberger une app Nextjs et une app React sur le même hébergeur ? Est ce que vous avez fait pour Converkit et app.converkit ?
    — Dois-je utiliser l’API de Next pour mes requêtes ou plutot placer l’API du côté du back office ? (et dans ce cas y a t-il une bonne solution a utiliser ?

    Sachant que je souhaiterais que cette API serve plus tard à délivrer des données pour une application React Native.

    Voila merci pour vos réponses 🙂

    • Salut Rudy,

      Je te propose dans un premier temps de faire au plus simple.
      Ton app Next est capable de gérer un backoffice en full Server Side Rendering et, au besoin suivant tes vues, de faire du client side rendering pour raffraichir de la donnée à la volée.
      Tu as également la possibilité de créer un répertoire “api” dans les pages, qui te donnera accès à un backend. Tu pourras accéder à cette API en utilisant la route /api. Tu verras dans la doc c’est assez bien fait.

      Si jamais ton app se complexifie, tu pourras migrer ton code vers une app react qui sera déployée sur un serveur à part. Tu pointeras ton subdomaion app.domainame.com vers ton app react.
      C’est comme ça que tu as ta landing page sur domainname.com et l’app sur app.domainname.com par exemple

      • Merci pour ta réponse !

        Oui pour le moment je continue de développer les deux parties sur NextJS, j’avoue qu’il commence à y’avoir beaucoup de fichiers, d’où mon questionnement sur la séparation totale du backoffice en React et le Landing avec Nextjs.

        Juste une dernière question : si je venais à séparer les deux pour les mettre sur deux serveurs distincts en utilisant d’un coté Nextjs et l’autre React, de quel côté devrais-je développer mon API (REST) ? En utilisant Nextjs et son système d’API par dossier, (donc coté Landing) ou utiliser autre chose du côté React back office ?

        Merci pour tout 😉

        • Si tu sépares, tu vas avoir un repository backend avec ton api Node, un repository frontend avec ton app react. Du coup pour ta landing page tu n’aurais même plus besoin d’utiliser Next, une simple page statique suffirait

  • Hello,
    Merci pour l’article qui aide à y voir un peu plus clair, cependant aurais-tu un article qui parle et détaille plus amplement la conception et fonctionnement d’un site e-commerce en page statique + backend du coup?

Retrouvez nous

N'hésitez pas à nous suivre sur les différents réseaux sociaux !

Most popular

Most discussed