Comment concevoir et déployer un portfolio de programmeur avec Next.js
Pour réussir une carrière de développeur web, il est important d’avoir un portfolio web solide. Le portfolio décrit mieux votre expertise et montre à de potentiels clients que vous savez développer des applications web et des sites internet de qualité. C’est aussi ce qui va permettre d’attirer des prospects qualifiés qui désirent lancer leurs plateformes en ligne. Aujourd’hui, le marché de la programmation web est très concurrentiel. Concevoir un portfolio de programmeur qui retient l’attention s’avère donc essentiel. Grâce à l’outil NextJS, vous pouvez créer et déployer un portfolio robuste et de qualité qui séduira certainement vos prospects. Nous vous montrons comment y parvenir.
NextJS : c’est quoi ?
Il existe plusieurs outils destinés à faciliter le développement des sites internet et des applications web et mobiles. Les frameworks font partie de ces outils devenus quasiment indispensables en programmation web. NextJS fait partie des frameworks basés sur le langage de programmation Javascript. C’est un outil qui permet aux utilisateurs de construire n’importe quel type d’application React (vitrine, portfolio de programmeur, e-commerce, etc.). Il faut noter que React est aussi un framework Javascript. En résumé, NextJS est un cadre de développement utilisant React comme bibliothèque.
Le framework s’est spécialisé dans les composants côté serveur (server side rendering ou SSR). Mais NextJS supporte aussi parfaitement la génération statique (server side generation ou SSG). Ainsi, une application créée avec ce framework peut être hébergée sur un SI ou sur différents types de services depuis un serveur http ou NodeJS.
Pourquoi créer un porfolio de programmeur avec NextJS ?
L’utilisation de NextJS pour créer un porfolio en ligne comporte beaucoup d’avantages. Premièrement, le framework aide le développeur web à créer une application ou un site vitrine très performant. React fait partie des cadres de développement “orientés composants” les plus usités aujourd’hui. Il est plus facile de créer des interfaces web avec cet outil qu’avec d’autres frameworks. Si vous aimez utiliser React, vous serez forcément en terrain connu avec NextJS.
Par ailleurs, le framework NextJS permet de générer très facilement des fichiers statiques. On peut donc déployer des sites internet statiques, mais aussi des plateformes dynamiques sur des serveurs basiques ou chez n’importe quel fournisseur cloud. La génération de fichiers statiques est essentielle lorsque l’on veut créer un site web vitrine. Or, les portfolios sont des vitrines qui mettent en lumière des travaux que l’on a réalisés. On peut alors déduire que NextJS est un excellent outil de création de portfolio dans tout type de domaine.
La configuration de votre environnement de programmation
Avant la réalisation et le déploiement de votre portfolio de programmeur, vous devez nécessairement configurer votre environnement de développement. Cette étape est d’ailleurs indispensable, quel que soit l’outil de développement que l’on veut utiliser. Pour mettre en place votre environnement de programmation, vous devez initialement installer Node.js sur votre ordinateur. Cette installation vous permettra d’utiliser la commande npx nécessaire pour exécuter localement les paquets npm. Sur la page de téléchargement de Node.js, choisissez un installateur en fonction de votre OS (Windows ou macOS). Une fois que c’est fait, redémarrez votre ordinateur pour que le système d’exploitation prenne en compte définitivement l’environnement Node.js. Le redémarrage n’est pas indispensable, mais il est conseillé de le faire. Exécutez ensuite la commande : npx create-next-app@latest mon-portfolio.
Une invite de commande apparaîtra alors et vous demandera de confirmer toutes les dépendances importantes. Après avoir validé ces dépendances, vous pouvez lancer la commande npm run dev. Cette commande rendra votre application disponible localement sur localhost:3000.
La construction d’un portfolio de programmeur responsive avec NextJS
Avec la configuration de l‘environnement de développement, tous les composants nécessaires à la création du portfolio de programmeur sont disponibles. Il ne reste qu’à s’en servir pour créer des interfaces de qualité. En général, un porfolio est composé des éléments suivants :
- Navbar
- Composant « A propos »
- Composant « Hero »
- Compétences
- Projects
- Contact
- Composant « Pied de page » ou « Footer ».
Les composants “Footer” et “Navbar” doivent obligatoirement apparaître sur la page d’accueil et sur toutes les autres pages. Next.js vous permettra de définir une mise en page générale.
Les mises en page avec NextJS
Avec l’outil Next.js, vous pouvez définir une structure de base cohérente pour tous les composants qui apparaîtront sur les pages de votre portfolio de programmeur. En général, cette mise en page comprend des éléments indispensables comme : l’entête, le menu de navigation et le footer (le pied de page). Ces éléments apparaissent sur toutes les pages du site. Il est donc important de créer un dossier “components” dans le répertoire source (le répertoire src) du projet. Dans ce dossier, créez un composant pour chaque élément. En gros, vous devez créer dans le dossier src, un composant Navbar et un composant Footer. Ces deux composants seront ensuite appelés dans le composant “Layout” du projet. L’appel de Navbar et de Footer se fait dans le composant “Layout.jsx” du projet par la ligne de code suivante : export default Layout;
Créer les composants du portfolio de programmeur
Pour chaque section de votre portfolio de programmeur, vous pouvez désormais créer des composants particuliers. Chacun de ces composants pourra, par la suite, être importé dans les pages de votre projet.
Le component Hero
Le component Hero est la première section que l’on peut voir en dessous du Navbar. Son principal but est de retenir l’attention des utilisateurs et de leur donner une brève idée de l’application ou du site web. Le fichier ou composant Hero.jsx doit donc se trouver dans le répertoire “Components”. Si vous le souhaitez, n’hésitez pas à ajouter du contenu à votre composant Hero. Dans le fichier style/globals.css créé nativement par Next.js, modifiez les styles en fonction de vos attentes.
Les autres components : About, Skills, Projects et contact
Le procédé de création de ces composants est pratiquement le même que celui utilisé pour créer le composant Hero. Le component “Skills” ou “compétences” vous permet d’énumérer vos compétences et les technologies que vous maîtrisez en tant que développeur. Ainsi, si vous êtes à l’aise avec le HTML, le CSS, le Javascript, Angular, React ou même Next.js, c’est le lieu de l’indiquer. Idéalement, créez un tableau dans un fichier externe et importez-le dans le fichier skills.jsx.
Dans la section “Projects”, vous devez fournir des preuves concrètes des compétences que vous avez citées dans le volet “Skills”. N’hésitez donc pas à intégrer un petit descriptif de chaque site ou application que vous avez réalisé. Dans la mesure du possible, mettez aussi des liens vers leurs codes source. Ici aussi, vous pouvez créer un tableau externe contenant tous les détails de chaque projet. Importez ensuite le tableau dans le fichier “projects.jsx”.
Enfin, créez le composant “contact” afin de permettre à vos visiteurs intéressés par vos compétences de vous contacter.