Installation Next.js simplifiée

L'Équipe Alphorm
L'Équipe Alphorm 12e lecture en min

Dans notre article précédent, nous avons exploré la création d’un composant Next.js, une étape essentielle pour tout développeur souhaitant maîtriser ce framework. Maintenant, nous allons approfondir l’installation de Next.js, une étape cruciale pour créer des applications web modernes et performantes. Ce guide détaillé vous accompagnera à travers chaque étape de l’installation de Next.js, depuis la configuration de base jusqu’à l’ajout de fonctionnalités avancées comme TypeScript et ESLint. En suivant ces instructions, vous serez en mesure de mettre en place un environnement de développement robuste et efficace, prêt à accueillir vos projets web les plus ambitieux. Découvrez comment optimiser votre flux de travail avec Next.js et tirer le meilleur parti de ses fonctionnalités puissantes.

 

Installer Next.js sans option

Dans cette section, nous allons revenir sur l’installation de nextjs. Donc nous allons voir comment installer Next.js sans options supplémentaires, en utilisant les outils couramment utilisés npm. Nous allons voir également comment créer un projet Next.js de base et le mettre en route pour que nous puissions commencer à construire notre application web.

Donc sans plus tarder, utilisons maintenant la commande courante :

npx create-next-app@latest nom-projet pour créer un projet nextJS.

Capture d'écran de l'installation de Next.js sans option via la commande npm.

Nous avons choisi « instnext » comme nom pour notre projet, et pour les options d’installation, nous avons simplement accepté les recommandations par défaut. Lorsque vous lancez l’application, voici à quoi ressemble le contenu par défaut dans le navigateur.

Exemple de contenu par défaut généré par Next.js après l'installation initiale.

Bah voilà, comme notre visuel indique bien que ce contenu est implémenté dans le fichier app/page.js c’est-à-dire, c’est le fichier page.js est notre index dans ce cas.

Mais qu’est ce qui va se passer si je vais créer mon propre composant dans le dossier app et puis y accéder en ajoutant juste le nom de mon composant dans l’url. Nous pouvons le constater comme ceci :

App/moncomposant.js

				
					export default function Moncomposant(){
return(
< h2>Ici est mon propre composant< /h2>
)
}
				
			

Voilà notre composant et va tenter d’y accéder dans l’url : http://localhost:3001/moncomposant

Capture d'écran d'une erreur d'URL montrant que la page n'a pas été trouvée dans une application Next.js.

Comme vous pouvez le voir, la page affiche un message indiquant qu’elle n’est pas trouvée. Cela signifie que l’URL n’a pas été correctement définie.

Pour résoudre ce problème, nous devons créer un dossier spécifique dans le répertoire app puis renommer le composant par page.js et enfin l’ajouter dans notre dossier spécifique. Jetons un coup d’œil au code ci-dessous pour voir comment procéder.

App/component/page.js

				
					export default function Moncomposant(){
return(
< h2>Ici est mon propre composant< /h2>
)
}
				
			

Et après notre composant affiche bien comme ceci :

Composant Next.js affiché correctement après la correction de l'URL.

Parfait, nous avons terminé l’installation de nextJS sans option maintenant. Dans la section suivante, nous allons essayer d’installer nextjs avec typeScript.

Installer TypeScript pour Next.js

Peut-être que vous n’avez jamais entendu parler de TypeScript, ou vous vous demandez ce que cela signifie exactement.

TypeScript est un langage de programmation open source qui étend les fonctionnalités de JavaScript. Développé par Microsoft, il apporte la notion de « typage statique » à JavaScript, ce qui signifie que vous pouvez définir des types pour vos variables, fonctions, paramètres, etc., dès le moment de l’écriture du code, plutôt que de les découvrir à l’exécution.

TypeScript est utilisé pour créer des applications évolutives et fiables, en particulier dans des projets d’entreprise ou de grande envergure. En permettant de détecter les erreurs plus tôt, il améliore la productivité des développeurs et réduit les risques de bugs en production.

Voyons comment l’installer alors, on fait la même comme on a fait tout à l’heure :

Capture d'écran de l'installation de TypeScript dans un projet Next.js via npm.

Tout d’abord, comme vous pouvez le voir dans l’aperçu, nous avons choisi « typescript » comme nom de projet et avons répondu « oui » à la question concernant l’installation de TypeScript, ce qui est l’élément clé de cette section.

Ensuite, l’installation a ajouté les dépendances nécessaires pour TypeScript dans notre projet.

Puis, la structure globale du projet est la même, on y trouve toujours le dossier app, no-modules, public et les fichier jsons.

Vue de la structure selon TYpescript

Mais ce qui nous intéresse le plus est qu’on a plus d’extension js.

Voyons maintenant la structure de notre projet en l’ouvrant dans un éditeur de code.

 

Exemple de fichiers avec extension .tst .

L’extension js a été remplacée par du TSX. Eh bien, c’est grâce à l’installation de Next.js.

Mais cela nous donne toujours le même resultat si nous allons lancer notre application.

Affichage du contenu par défaut d'un projet Next.js utilisant TypeScript.

Parfait, nous arrivons à installer typeScript pour notre projet. Dans la section suivante, nous allons voir comment installer ESLint.

Installer ESLint pour Next.js

Premièrement, ESLint est un outil open source utilisé pour analyser le code JavaScript et trouver des problèmes de style ou des erreurs de programmation. C’est un linter, un type d’outil qui permet de garantir que le code respecte certaines règles et conventions, aidant ainsi à maintenir un code propre, cohérent et sans erreurs.


Par conséquent, ESLint est utilisé pour maintenir la qualité du code, réduire les erreurs en production, et améliorer la lisibilité. Il aide les équipes de développement à suivre des conventions cohérentes et à prévenir des bugs courants.

Vous commettez l’installer maintenant dans notre projet.

On refait la même chose qu’on a fait tout à l’heure :

Capture d'écran de l'installation de ESLint via npm.

Notre projet s’appelle « eslint« , et nous avons répondu « oui » à la question concernant l’installation de TypeScript et d’ESLint. Par conséquent, les dépendances pour ESLint et TypeScript ont été ajoutées à notre projet.

Lorsque nous ouvrons notre projet dans notre éditeur de texte, la structure par défaut reste inchangée. Testons maintenant la fonctionnalité d’ESLint pour vérifier son utilité.

On va créer un dossier component et y ajouter un composant eslintTest.tsx par example. App/component/page.tsx

				
					export default function Page(){
return(
<h2 id="je-suis-un-developpeur-nextjs" class="rb-heading-index-4">Je suis un developpeur nextjs</h2>
<p>J'aime bien coder</p>
)
}
				
			

Voilà notre composant. Et lançons notre application maintenant avec la commande :

npm run lint pour voit notre code contient des erreurs ou pas.

Exemple de composant Next.js après correction des erreurs détectées par ESLint.

Comme vous pouvez le voir sur le visuel, ESLint nous indique que l’erreur se trouve dans le fichier app/component/page.tsx et précise que le JSX doit renvoyer un seul élément de haut niveau.

Il a raison, car actuellement, notre JSX renvoie deux éléments distincts. Corrigeons-le maintenant :

App/component/page.tsx

				
					export default function Page(){
return(
<div>
<h2 id="je-suis-un-developpeur-nextjs" class="rb-heading-index-4">Je suis un developpeur nextjs</h2>
<p>J'aime bien coder</p>
</div>
)
}
				
			

En lancant notre application, il nous affiche bien notre composant comme ceci :

Capture d'écran montrant l'installation d'un sous-dossier dans un projet Next.js.

Dans la section suivante, nous allons essayer d’installer un sous dossier

Plongez dans l’univers fascinant de Next.js et devenez un expert en 2024 grâce à notre formation vidéo exclusive sur Alphorm : Formation Next.js

Créer un sous-dossier dans Next.js

Il arrive que nous souhaitions organiser nos fichiers en créant des sous-dossiers bien structurés dans notre projet. Next.js permet de le faire par défaut si nous acceptons l’option correspondante lors de son installation.

Dans cette section, nous allons explorer cette fonctionnalité de Next.js et voir comment nous pouvons en tirer parti pour mieux organiser notre projet.

Pour le faire, Créons un nouveau dossier pour installer nextJS. Donc nous allons choisir le sous-dossier

Et qui me donne la commande comme ceci : npx create-next-app@latest sous-dossier

Vue de la structure des dossiers incluant des sous-dossiers.

Voici comment l’installation démarre : dans cette section, nous avons également répondu « oui » à la question concernant l’utilisation de sous-dossiers.

Pour voir l’effet de cette option, ouvrons notre projet dans l’éditeur de texte et examinons la structure, qui devrait ressembler à ceci :

Affichage du contenu d'un sous-dossier

Tout a été importé comme d’habitude, mais la différence se trouve dans la présence d’un sous-dossier app à l’intérieur du dossier src, ce qui donne src/app. Cela est dû à l’option permettant la création de sous-dossiers lors de l’installation de Next.js.

Si vous lancez l’application, il affiche bien un visuel comme ceci :

Capture d'écran de l'installation du routage dans un projet Next.js via npm.

Nous pouvons constater sur le visuel que le fichier contenant le contenu par défaut se trouve dans le dossier src/app/page.js qui était généré par nextJS.

Pour aller plus loin et maîtriser pleinement les compétences abordées dans cet article, nous vous invitons à découvrir les formations d’Alphorm. Formations Alphorm.

Configurer le routage dans Next.js

Le routage est une fonctionnalité clé dans le développement d’applications web, permettant de naviguer entre différentes pages ou vues. En Next.js, le routage est simple et intuitif, grâce à la convention de nommage des fichiers.

Dans cette section, nous expliquerons comment configurer le routage basé sur les pages dans un projet Next.js. Vous découvrirez comment les dossiers et les fichiers dans le répertoire pages se traduisent automatiquement en différentes routes accessibles par URL.

Sans plus tarder, lançons la commande d’installation maintenant :

npx create-next-app@latest routage

Vue de la structure des dossiers après configuration du routage.

Voici la nouvelle structure par défaut de nos fichiers et dossiers. Ce changement est le résultat du routage par pages lors de l’installation de Next.js. Cela signifie que Next.js configure automatiquement le routage en fonction de la structure de notre projet, créant ainsi des chemins de navigation cohérents et intuitifs.

Ainsi, si nous lançons notre application, voici ce que nous verrons dans le navigateur :

Exemple de contenu affiché par le routage par défaut de Next.js dans un projet.

Comme vous pouvez le constater, le contenu par défaut se trouve dans le fichier index.tsx, comme indiqué sur l’image ci-dessus. Ce routage par défaut est rendu possible grâce à Next.js.

Conclusion

En suivant ce guide, vous avez appris à installer Next.js, TypeScript et ESLint, et à configurer des sous-dossiers et le routage de manière efficace. Ces compétences sont essentielles pour développer des applications web professionnelles avec Next.js. En maîtrisant ces étapes, vous pouvez améliorer la qualité de votre code, organiser votre projet de manière optimale et garantir une navigation fluide. Continuez à explorer les vastes possibilités offertes par Next.js pour créer des applications web innovantes et performantes. Profitez de la puissance de ce framework pour transformer vos idées en réalité. Et par la suite nous allons traiter dans le volet suivant l’optimisation SSR Next.js

 

 
 
ÉTIQUETÉ : NextJS
Partager cet article
Par L'Équipe Alphorm Démocratiser la Connaissance Informatique pour Tous !
Suivre :
L'Équipe Alphorm, c'est la démocratisation de la connaissance informatique. Passionnés et dévoués, nous sommes là pour vous guider vers le succès en rendant la technologie accessible à tous. Rejoignez notre aventure d'apprentissage et de partage. Avec nous, le savoir IT devient une ressource inspirante et ouverte à tous dans un monde numérique en constante évolution.