1
Module 1
Créer un projet React avec Next.js
Notion de framework web
Les frameworks web ont révolutionné la façon dont nous construisons des applications web. Pour mieux comprendre leur importance, nous commencerons par examiner l'évolution ainsi que les limites du développement web original.
Les limites du développement web client original
Au début, le développement web était principalement basé sur des langages de balisage comme HTML et des styles CSS pour la présentation. Bien que ces technologies aient permis la création de pages web statiques, la gestion de la complexité croissante des applications web interactives était difficile.
Ensuite, est arrivée l'ère du JavaScript côté client, qui a permis aux développeurs d'ajouter de l'interactivité et de la dynamique aux pages web. Cependant, cela a rapidement conduit à des problèmes de maintenabilité et de gestion de la complexité lorsque les applications sont devenues plus sophistiquées.
Toutes ces limites du développement web client original finiront par être comblées avec l'avènment des frameworks car ces derniers possèdent de nombreux avantages.
Les avantages des frameworks web
Un framework web peut être défini comme étant un ensemble d'outils, de bibliothèques et de conventions qui permmettent aux développeurs de créer des applications web plus rapidement et plus efficacement, grace à des fonctionnalités prêtes à l'emploi. Ces outils possèdent de nombreux avantages parmi lesquels on peut citer:
Une productivité accrue : Grace à leurs fonctionnalités déjà prêtes à l'emploi, les frameworks web réduisent considérablement le temps de développement. En effet, ces fonctionnalités permettent aux développeurs de se concentrer sur la partie métier au lieu de passer du temps à réécrire du code existant déjà.
La réutilisation du code : L'un des principaux avantages des frameworks est la possibilité pour le développeur de réutiliser des composantes développées par lui-même.
Une maintenabilité améliorée : Les frameworks encouragent souvent les bonnes pratiques de développement et fournissent une structure cohérente, ce qui facilite la maintenance du code à long terme.
Une Sécurité renforcée : De nombreux frameworks intègrent des mécanismes de sécurité pour protéger les applications contre les attaques courantes.
Une communauté active : Les frameworks web ont souvent une communauté active de développeurs, une large documentation, des bibliothèques tierces et des outils qui peuvent aider les développeurs à résoudre des problèmes et à ajouter de nouvelles fonctionnalités à leur application.
Les frameworks web client les plus utilisés
Au moment où ce contenu est produit, trois principaux frameworks sont utiliés par les développeurs pour de développement web client. Sans toutefois établir un ordre de popularité, ces frameworks sont les suivants:
React.js : Développé par Facebook, React est une bibliothèque JavaScript populaire pour la construction d'interfaces utilisateur. Il est largement utilisé pour créer des applications web interactives et des interfaces utilisateur réactives.
Angular : Développé et maintenu par Google, Angular est un framework JavaScript open source qui permet de construire des applications web robustes et évolutives.
Vue.js : Vue est un framework JavaScript progressif pour la construction d'interfaces utilisateur. Il est apprécié pour sa simplicité et sa flexibilité, ce qui en fait un choix populaire pour les développeurs débutants et expérimentés.
Dans le cadre de ce cours, nous utiliserons Next.js qui est un framework open source basé sur React, et développé par Vercel. Nous y reviendrons dans les prochaines sections.
Environnement de développement
Présentation
Dans la suite de notre cours, nous utiliserons la plateforme Next.js, qui est un framework basé sur la librairie React. Notre objectif principal consitera à développer la partie cliente d'une application web moderne.
Remarque
Il est important de noter que Next.js n'est pas la seule plateforme de développement de projet React. Plusieurs autres plateformes à l'instar de Storybook, Material UI, Gatsby, Semantic UI React, React Bootstrap peuvent être utilisées pour développer des projets React.
Afin de réussir notre développement, nous aurons besoin d'installer quelques outils logiciels si cela n'est pas déjà fait.
Node.js
Le premier et l'indispensable outil à installer sera Node.js. C'est un environnement d'exécution JavaScript open source, permettant d'exécuter du code JavaScript dans un Terminal.
Attention !
Au cas où Node.js serait déjà installée dans votre ordinateur, vous devez vous rassurer d'avoir la version Node.js 18.17.0 ou plus. En effet, au moment où ce contenu est produit, Next.js a besoin de Node.js 18.17.0 ou plus pour fonctionner correctement. De plus, il est conseillé de télécharger la version Current et non la version LTS de Node.js
Pour savoir si Node.js est déjà installée et aussi savoir sa version, vous pouvez utiliser la commande suivante dans un Terminal :
Terminal
node -vVisual Studio Code
Visual Studio Code (souvent abrégé en 'VSCode') est un éditeur de code source puissant, flexible et gratuit, développé par Microsoft. Il est conçu pour les développeurs et vise à fournir un environnement de développement complet pour une variété de langages de programmation et de technologies. Nous l'utiliserons pour l'écriture de nos différents codes.
Attention !
Ne pas confondre Visual Studio et Visual Studio Code. Ces deux logiciels sont développés par Microsoft mais sont différents. Ils ont d'ailleurs des logos différents.
Logo de Visual Studio Code :Logo de Visual Studio :
Git et Github
Pour faciliter la collobaration sur les projets que nous aurons à créer dans le cadre de ce cours, nous aurons besoin de Git et d'un compte sur la plateforme Github. En effet, Git est un système de contrôle de version conçu pour gérer le suivi des modifications apportées aux fichiers dans des projets collaboratifs, en particulier ceux liés au développement de logiciels. GitHub quant à lui est une plateforme web qui utilise Git pour offrir des services d'hébergement de code, de collaboration et de gestion de projet. Elle repose sur Git mais propose des fonctionnalités supplémentaires pour faciliter le travail collaboratif, la gestion de projets, et l'automatisation.
Technologies utilisées par Next.js
Dans cette section, nous présenterons quelques technologies ou bibliothèques de Next.js que nous utiliserons tout au long de notre cours pour faciliter le développement de notre application. Parmi ces bibliothèques on peut citer React, JSX, clsx, ESLint et Webpack.
React
Next.js repose sur React pour la création d'interfaces utilisateur. En effet, React est une librairie JavaScript client grace à laquelle, nous pourrons manipuler le DOM de nos pages Web de façon optimale et rapide. Grace à React, notre application sera facilement transformée en application web monopage. Cette fonctionnalité réduira considérablement les appels au serveur, rendant ainsi notre application beaucoup plus performante.
JSX
JSX (JavaScript XML) est une extension de syntaxe pour JavaScript. Elle nous permettra d'écrire du code HTML directement à l'intérieur des fichiers JavaScript. Cette syntaxe facilite la construction d'interfaces utilisateur en rendant le code plus expressif et lisible. Bien que JSX soit une extension de JavaScript, les navigateurs ne sont pas capables de le comprendre. Il faudra donc convertir le langage JSX en JavaScript. Pour cela, nous utiliserons Babel qui est une librairie capable de compiler des langages de programmation vers d'autres.
Bon à savoir
Une autre extension de JavaScript pouvant être utilisée en lieu et place de JSX est TypeScript. Mais nous le l'utiliserons pas dans le cadre de notre cours. Pour faire simple, on dira que TypeScript est une version typée de JavaScript.
Babel
Babel est un outil de compilation largement utilisé dans l'écosystème JavaScript. Il est principalement conçu pour convertir le code JavaScript de versions plus récentes ou de syntaxe non standard en un code JavaScript plus ancien, compatible avec un plus grand nombre de navigateurs et d'environnements. Cela permet aux développeurs d'écrire du code JavaScript moderne tout en assurant une compatibilité avec des environnements où des fonctionnalités plus récentes ne sont pas encore prises en charge.
clsx
clsx(classe extensible) est une petite bibliothèque JavaScript/TypeScript que nous utiliserons pour conditionner et combiner des noms de classes CSS de manière simple et efficace. Cela consistera à affecter différentes classes à un élément HTML à partir de certaines conditions préétablies.
ESLint
ESLint est un outil d'analyse statique du code pour JavaScript et TypeScript. Il nous permettra de détecter et de corriger les erreurs de syntaxe, les mauvaises pratiques, et les incohérences de style dans notre code.
Webpack
Webpack est un outil de construction qui sera utilisé par Next pour réaliser entre autres les tâches suivantes :
Bundling des Fichiers : Webpack regroupe tous les fichiers nécessaires au fonctionnement du projet, en plusieurs bundles ou lots optimisés. Cela permet de reduire le nombre de requêtes HTTP nécessaires au chargement de l'application.
Transcompilation du code : C'est webpack qui fera appel à Babel pour compiler nos fichiers JSX en fichiers JavaScript, compréhensible par les navigateurs.
Gestion des Ressources Statistiques : Webpack s'occupera des fichiers statiques de notre application tels ques les fichiers CSS, JSON, images et bien d'autres, en les optimisant pour la production.
Bon à savoir
Suite à la présentation des différentes bibliothèques qui seront utilisées, on est en droit de s'inquiéter quant à leurs différentes configurations. C'est justement l'une des principales raisons pour lesquelles nous avons choisi d'utiliser Next.js. En effet, Next.js s'occupera de toutes les configurations nécessaires lors de la création du projet. Il nous suffira donc de saisir quelques lignes de commandes, et de répondre à quelques questions pour avoir un projet prêt à l'usage.
Création d'un projet React avec Next.js
Maintenant que le décor a été planté, il est temps pour nous de créer notre application React avec Next.js. Mais avant l'exécution des commandes qui vont suivre, il est important de se rassurer d'avoir parcouru toutes les étapes qui précèdent. Pour mieux évoluer, nous allons de prime à bord présenter l'application que nous développerons progressivement dans ce cours.
Description du projet du cours
Dans le cadre de ce cours, nous développerons progressivement une version simplifiée d’une application de gestion de bibliothèque.Nous l'appellerons biblio-app et elle aura entre autres les fonctionnalités suivantes :
Une page d'accueil
Une page de connexion
Une page pour lister les documents de la bibliothèque
Une page de contact ayant un formulaire
La possibilité de changer la langue de l'application
La possibilité de modifier le thème de l'application
La possibilité d'installer notre application aussi bien sur PC que sur mobile
D'autres fonctionnalités pourront être ajoutées.
Créer un projet react avec Next.js
Ouvrir un Terminal : Faire un clic droit à l'emplacement où l'on souhaite créer le projet. Puis cliquer sur 'Ouvrir dans un Terminal'
Saisir la commande qui suit : @latest siginfie que nous utilisons la version la plus récente de create-next-app
Terminal
npx create-next-app@latestIl suffit donc de répondre aux questions posées pour que le projet soit créé. Dans notre cas, voici les réponses à forunir :
Quel est le nom de votre projet ? Réponse = biblio-app
Voulez-vous utiliser TypeScript ? Réponse = NO
Voulez-vous utiliser ESLint ? Réponse = YES
Voulez-vous utiliser Tailwind CSS ? Réponse = YES
Voulez-vous utiliser `src/` directory ? Réponse = NO
Voulez-vous utiliser App Router? (recommended) ? Réponse = YES
Voulez-vous utiliser Turbopack pour `next dev`? Réponse = YES
Voulez-vous personnaliser le default import alias (@/*) ? Réponse = NO
Important
Le nom du projet doit être en miniscule avec des tirets au lieu des espaces.
Tester le fonctionnement de l'application
Pour tester le fonctionnement de l'application, il suffit de saisir les commandes qui vont suivre dans le Terminal. La première commande nous permettra de nous positionner dans le dossier de notre projet bilio-app et la deuxième permettra d'exécuter l'application.
Terminal
cd biblio-appTerminal
npm run devPour finir, il suffit de placer le pointeur de la souris sur le lien 'http://localhost:3000' qui apparait, et de cliquer avec le bouton gauche de la souris pour voir la page d'accueil de l'application s'ouvrir avec le navigateur par défaut.
Structure d'un projet React avec Next.js
Maintenant, est venu le moment pour nous d'explorer brièvement les différents fichiers générés lors de la création de notre projet. Si la création du projet s'est déroulée avec succès, votre projet aura la structure suivante :
Structure du projet
Le dossier '/app'
Ce dossier contiendra la structure de base de notre application. Comme indiqué sur l'image précedente, ce dossier contiendra entre autres :
Le fichier 'layout.js' : C'est ici que sera définie la structure générale de notre application. Ce fichier très important nous permettra de définir les éléments communs à toutes les pages tels que les pieds de page, les barres de navigation et bien d'autres.
Le fichier 'page.js' : C'est quelque sorte notre page d'accueil.
Le fichier 'page.module.css' : Cette page contiendra le CSS du fichier page.js.
Le fichier 'globals.css' : Dans ce fichier, nous définirons du CSS pouvant être appliqué à toutes les pages de notre application. On pourra y définir entre autres des couleurs, des polices de caractères et bien d'autres.
Le fichier 'favicon.ico' : C'est une petite icône utilisée pour représenter l'application dans les onglets des navigateurs, les favoris, les barres d'adresses, et d'autres endroits où une représentation graphique du site est requise. Nous verrons plus tard comment la modifier.
Le dossier '/public'
Ce dossier contiendra tous les fichiers statiques de notre application. Il s'agit des fichiers qui ne seront pas compilés par Babel. Parmi ces fichiers, on peut citer les fichiers images, .json, .txt, les icônes et bien d'autres.
Le fichier '/package.json'
il contiendra les configurations du projet avec Node.js. D'autres configurations seront ajoutées avec l'évolution du cours.
Le fichier '/next.config.mjs'
C'est ce fichier qui contient les configurations de Next. Nous y reviendrons.
Configurations de base pour notre projet
Jusqu'à présent, notre application, lorsqu'elle est exécutée, affiche des liens vers des pages de Vercel. Nous allons remplacer certains codes par les nôtres afin d'afficher simplement ' soyez les bienvenus sur biblio-app'. Pour cela, vous devez remplacer les codes des 4 fichiers qui vont suivre, par les codes fournis.
Remarque
Vous pouvez copier le code grâce au bouton situé à l'extrémité droite en haut du bloc de code.
fichier '/app/layout.js'
/app/layout.js
import { Inter } from 'next/font/google';
import './globals.css';
const inter = Inter({ subsets: ['latin'] });
export const metadata = {
title: 'Biblio-app',
description: 'Demo Cours Programmation web avancé',
};
export default function RootLayout({ children }) {
return (
<html lang='en'>
<body className={inter.className}>{children}</body>
</html>
);
}
fichier '/app/page.js'
/app/page.js
import Image from 'next/image';
import styles from './page.module.css';
export default function Home() {
return (
<main className={styles.main}>
<div className={styles.welcome}>
Soyez la bienvenue sur biblio-app
</div>
</main>
);
}
fichier '/app/page.module.css'
/app/page.module.css
.welcome {
display: flex;
justify-content: space-between;
align-items: center;
justify-content: center;
padding: 6rem;
min-height: 100vh;
color: var(--first-color);
font-size: var(--big-font-size);
}
fichier '/app/globals.css'
/app/globals.css
:root {
--hue-color: 165;
--first-color: hsl(var(--hue-color), 60%, 33%);
--big-font-size: 2rem;
--font-bold: 800;
--mb-1: 1rem;
--z-fixed: 1000;
}
@media screen and (min-width: 968px) {
:root {
--big-font-size: 3rem;
}
}
body.dark {
--first-color: #0C0C1E;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Remarque
Il suffit d'enregistrer les modifications et l'application affichera 'Soyez les bienvenus sur biblio-app' au centre de la page.
Exercice d'application
La dernière chose à faire sera de changer les extensions des fichiers layout.js et page.js en .jsx, pour des raisons que nous avons évoquées plus haut.
Code source
Important
Avant d'executer la commande 'npm run dev', bien vouloir exécuter la commande 'npm i'.
Présentation du projet
Travail à faire