Nos premiers pas avec Next.js

Bonjour à tous, et bienvenue au troisième segment de ma veille technologique sur Next.js. Il est finalement venu le temps de plonger concrètement dans l'univers Next.js et d'expérimenter avec les outils que j'ai mentionnés dans mon article précédent !

Créer notre première application Next.js

Pour débuter, afin de créer un nouveau projet Next.js, il faut tout d'abord avoir installé l'environnement d'exécution Node.js avec la version 18.18 ou supérieure au moment de cette publication (le 12 février 2025).

Si l'on veut valider qu'on a une version valide de Node, il suffit d'ouvrir un terminal et de faire la commande node --version. De mon côté, ça tombe bien, je suis à la version v22.14.0 !

Si ce n'est pas votre cas, il suffit d'aller sur le site de Node.js et d'installer une version compatible.

Bon, parfait ! Maintenant qu'on sait que l'on a les dépendances requises pour travailler avec Next.js, il suffit de lancer cette commande dans un terminal à l'emplacement où l'on souhaite initialiser un projet Next.js :

npx create-next-app@latest

On sera amené à confirmer si l'on veut bel et bien installer le paquet create-next-app@xx.x.x. On peut confirmer l'installation pour passer à la prochaine étape.

Pour ma part, il s'agit de create-next-app@15.1.7.

Par la suite, on doit répondre aux questions suivantes afin de configurer les spécifications de notre projet Next.js à générer.

Quel est le nom du projet ? - demo-next

Voulez-vous utiliser TypeScript ? - Yes

• C'est un choix personnel. Pour ma part, j'aime travailler avec du JavaScript typé, je vais donc dire oui à cette question.

Voulez-vous utiliser ESLint ? - Yes

• ESLint permet d'analyser le code du projet pour assurer qu'il respecte le même format, la même structure et la même logique au sein du projet. Encore là, c'est un choix personnel, on peut très bien travailler avec Next.js sans cet outil.

Voulez-vous utiliser Tailwind CSS ? - No

• Si vous connaissez Tailwind CSS, cela permet de configurer automatiquement Tailwind dans le projet.
• Pour les besoins de la cause, je vais rester avec des fichiers CSS indépendants pour me concentrer uniquement sur les technologies de Next.js.

Voulez-vous avoir votre code dans un dossier src/ ? - Yes

• Cette option est assez explicite, personnellement je préfère avoir le code de l'application dans un fichier src/ séparé des fichiers de configuration de l'application.

Voulez-vous utiliser l'App Router (recommandé) ? - Yes

• Cette option permet l'utilisation du routeur de Next.js pour le rendu côté serveur (SSR) et la génération de site statique (SSG). De plus, il permet la séparation entre le code dynamique côté client et le code serveur. Et bien sûr, c'est grâce à ce système de routage que l'on pourra utiliser l'arborescence du dossier /app pour créer les routes de notre application.
• En bref, si on veut essayer beaucoup des nouveautés de Next.js, il serait à notre avantage de dire oui à cette étape !

Voulez-vous utiliser Turbopack pour `next dev` ? - Yes

• Turbopack est un "bundler" qui génère le code JavaScript à partir du code source de l'application afin de l'exécuter dans le navigateur. Il pourrait être comparé à Webpack et Vite.
• Il a été conçu pour compiler le code et accélérer le temps de développement en local. Il est donc utilisé uniquement en développement et non en production.

Voulez-vous personnaliser l'alias d'importation (`@/*` par défaut) ? - No

• L'alias d'importation permet de simplifier le chemin d'importation des fichiers.

Et voilà ! Le projet sera alors généré à l'emplacement désiré. On devrait maintenant voir un beau dossier avec le nom du projet choisi.

Architecture du projet

Si l'on ouvre le dossier du projet qui a été généré, on devrait avoir une architecture qui ressemble à ceci :

Voici la description des parties importantes de cette architecture.

Le dossier /public

• C'est ici que l'on va déposer les images et tout le reste du contenu public du site.

Le dossier /src

• Ce dossier contiendra tout le code source de notre application Next.js. Éventuellement, on aura un dossier de composants React et plein d'autres éléments que l'on pourra ajouter à ce dossier.

Le dossier /app

• Il s'agit du dossier contenant les routes de votre application. Chaque sous-dossier sera considéré comme une route potentielle dans votre application et pourra être personnalisé à l'aide des fichiers présents dans chaque dossier.

Le fichier page.tsx

• Il s'agit de la première page de l'application, l'équivalent de la page d'accueil. Pour chaque sous-dossier du dossier /app, il sera possible de définir un fichier page.tsx qui contiendra les spécificités de la section de votre application. Nous en découvrirons davantage dans le prochain article.

Le fichier layout.tsx

• Il s'agit d'une mise en page pour le dossier dans lequel le fichier se trouve. Il permet de définir un style pour l'ensemble de la page et affectera également les sous-dossiers contenant leur propre fichier page.tsx. Nous allons aussi découvrir son fonctionnement plus en détail dans le prochain blog.

Le fichier next.config.ts

• Ce fichier permet de personnaliser la configuration de notre application Next.js.

Comment tester l'application ?

Afin de visualiser l'application, Next.js a généré un fichier package.json contenant des scripts pour la lancer. Si l'on ouvre ce fichier, on devrait voir une section contenant les commandes possibles pour exécuter et compiler le projet :

npm run dev permet de lancer l'application en mode développement en utilisant le bundler Turbopack mentionné précédemment (si nous avons dit oui à cette option lors de l'initialisation du projet).

npm run build permet de compiler le projet pour générer un dossier dist qui servira à publier notre version officielle de l'application sur un serveur.

npm run start permet de démarrer le projet compilé avec la commande build.

npm run lint permet de valider le code source de l'application en détectant les erreurs de format, de structure et de logique du code. Il fournit un compte rendu des éléments à corriger ou à surveiller dans la console.

Dans notre cas, si on veut tout simplement voir l'application pour la première fois, il suffit d'exécuter la première commande mentionnée à l'intérieur du dossier du projet :

npm run dev

Il suffit ensuite d'aller à l'adresse http://localhost:3000 dans le navigateur de notre choix. On devrait alors obtenir quelque chose comme ceci :

C'est un bon début !

Conclusion

Maintenant qu'on sait comment initialiser un projet Next.js, qu'on connaît son architecture de base et qu'on sait comment lancer l'application, on est enfin prêt à développer nos premières fonctionnalités et à expérimenter avec les avantages mentionnés dans l'article précédent.

Nous commencerons à explorer ces fonctionnalités intéressantes dans le blog de la semaine prochaine.

À bientôt !

Sources

Vercel Team, Next.js Documentation, https://nextjs.org/docs/app/getting-started (Page consultée le 12 février 2025).

Elana Olson, A Beginner’s Guide to Building a React + Next.js App, https://medium.com/@elanaolson/a-beginners-guide-to-building-a-react-nextjs-app-7463120389f0 (Page consultée le 12 février 2025).