Beaucoup de développeurs peinent à structurer leurs projets Next.js, notamment lors de la configuration du routage ou de l’intégration de TypeScript et ESLint.
Une mauvaise organisation peut entraîner des erreurs, compliquer la maintenance, et ralentir le développement, augmentant les risques de bugs et de retards.
Découvrez dans cet article comment installer et configurer Next.js de manière optimale, avec des conseils pratiques pour une gestion de projet efficace et sans erreurs, afin de maximiser votre productivité et garantir un code propre et maintenable.
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.
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.
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 Next.js 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
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 :
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 :
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.
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.
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.
Parfait, nous arrivons à installer typeScript pour notre projet. Dans la section suivante, nous allons voir comment installer ESLint.
Formation Maîtriser les Fondamentaux de NextJS
Devenez expert en développement web dynamique avec NextJS et créez des applications performantes.
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 :
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.
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 :
Dans la section suivante, nous allons essayer d’installer un sous dossier
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
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 :
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 :
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.
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
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 :
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.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui. Découvrez des cours variés pour tous les niveaux !
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
