Installation d'un environnement local
Comme pour ReactJS, vous avez 2 possibilités pour démarrer une application NextJS de zéro :
- Manuellement
- "Automatiquement" : avec le package create-next-app (comme create-react-app)
Avant de voir les deux procédés, il est intéressant de savoir que NextJS est un framework qui ne demande pas une architecture très complexe. L'installer manuellement revient essentiellement a installer 3 packages :
- react
- react-dom
- next
Dès lors, il devient très rapide de démarrer mais vous n'avez pas de squelette, le fameux "Hello world" de NextJS.
Installation automatique
Pour installer votre environnement, il vous suffit d'exécuter la commande :
my-app-nextjs correspond au nom du dossier dans lequel va s'installer votre environnement. Vous pouvez le remplacer par ce que vous souhaitez.
A la fin de l'installation, vous devriez voir apparaître des instructions. Si ce n'est pas le cas c'est qu'il y a quelque chose qui n'a pas fonctionné.
Les commandes disponibles après installation
Lorsque vous utilisez l'installation via le package de création, nous avons 3 scripts à notre disposition dans le fichier package.json qui vont nous permettre de démarrer notre environnement de développement ou l'équivalent d'un environnement de prod.
- yarn dev (ou npm run dev) : cela vous permet de lancer le serveur de développement
- yarn build (ou npm run build) : « build » les fichiers dans un environnement de production (minification, etc...)
- yarn start (ou npm run start) : lance NextJS dans un environnement de produciton.
Ce qui nous intéresse maintenant, c'est de démarrer notre environnement de développement et de constater l'existant.
Rendez-vous sur l’adresse indiquée : localhost:3000 découvrez la première page de votre application.
Contrairement à la création d'une application pour ReactJS, l'ensemble du projet NextJS semble bien plus léger.
C'est petit n'est-ce pas ? Et ce qui est intéressant c'est que votre page a déjà le Server Side Rendering (SSR). Si vous regardez le code source de la page HTML, vous pourrez vous apercevoir. "Amazing!" comme on dirait. Si vous observez, il n'y a pas de configuration à faire ou un script obscur caché quelque part, cela s'appelle : NextJS.
Pour un package aussi petit, il devient donc très simple d'effectuer une installation manuelle.
Installation manuelle
Afin d'effectuer une installation manuelle de NextJS, il vous faut initialiser votre package.json :
L'option -y permet de vous éviter une suite de question concernant la configuration du fichier package.json ; nous voulons simplement les options par défaut.
Suite à cela, il vous suffit d'installer les 3 packages nécessaires à l'utilisation de NextJS :
Une fois installé, je vous invite a rajouter les 3 scripts que nous avons pu voir au dessus dans votre fichier package.json :
Cela permet de recréer les mêmes conditions de développement que l'installation automatique. next ici faisant référence à l'installation du package next qui se trouve dans vos node_modules. De cette manière, nous évitons d'installer next en global sur notre environnement de travail, ce n'est pas nécessaire. Vous devriez donc avoir quelque chose dans ce style :
Il nous manque plus qu'une chose pour que tout cela fonctionne. Vous remarquerez que si vous tentez de lancer le script npm run dev, vous allez obtenir une erreur qui vous explique qu'il manque un dossier pages.
Rien d'étonnant puisque nous avons simplement que 2 fichiers (package.json et package-lock.json) et nos node_modules. Pour démarrer notre application, nous avons donc besoin de créer une page!
Notre première page
NextJS est construit autour du concept des pages. Ce dossier nommé pages est une convention du framework afin d'y associer son système de routing. De fait, dès que vous exportez un composant React afin comme extension : .js, .jsx, .tsou ou .tsx, il sera interprété comme la racine de votre page.
Pour avoir votre l'équivalent de votre page d'accueil, nous allons donc créer un composant React dans pages/index.js :
Vous pouvez relancer le projet avec la commande :
Rendez-vous sur l'adresse : localhost:3000 et "magique", vous avez votre première page sur NextJS avec du SSR !
Voici a quoi doit ressembler votre projet pour démarrer votre application :
