Démarrer un projet Next.js

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

Bienvenue dans notre guide complet sur le projet Next.js. Si vous avez suivi notre précédent article sur le rendu côté serveur (SSR) avec Next.js, vous êtes déjà familier avec les bases et les avantages de ce puissant framework. Que vous soyez débutant ou développeur expérimenté, cet article vous fournira toutes les étapes nécessaires pour démarrer, configurer et optimiser votre projet Next.js. Nous couvrirons tout, depuis l’installation de Node.js et la création d’une nouvelle application Next.js, jusqu’à la mise en place de Webpack, la navigation entre les pages, et bien plus encore. Notre objectif est de vous aider à maîtriser Next.js et à créer des applications web performantes et bien structurées. Suivez notre guide étape par étape pour assurer le succès de votre projet Next.js.

Démarrer le projet Next.js

Dans cet article, nous allons apprendre Next.js en pratiquant avec des projets réels. Dans cet article, nous allons démarrer notre projet. Mais avant toute chose, il faut que Node.js soit installé sur notre système d’exploitation. Si ce n’est pas encore fait, suivez les instructions ci-dessous pour l’installer.

-Téléchargement et installation de Node.js :

  • Rendez-vous sur le site officiel de Node.js : https://nextjs.org .
  • Téléchargez la version LTS (Long Term Support) recommandée pour une meilleure stabilité.
  • Suivez les instructions d’installation correspondant à votre système d’exploitation (Windows, macOS, Linux).

-Vérification de l’installation :

  • Ouvrez un terminal ou une invite de commande.
  • Tapez la commande suivante pour vérifier la version de Node.js installée : node -v .
  • Vous devriez voir s’afficher le numéro de version de Node.js.

Cette installation nous fournit npm. Une fois Node.js correctement installé, nous pourrons passer à la création de notre projet Next.js.

La création d’un projet Next.js peut se faire de deux manières : manuellement ou automatiquement. Nous pouvons également utiliser la documentation officielle de Next.js pour plus de détails et d’options avancées via le lien suivant : https://nextjs.org/docs/getting-started/installation .

Installation automatique :

L’installation automatique est basée sur l’utilisation de commande dans le terminal :

npx create-next-app@latest . Une fois cette commande est exécutée dans le terminal, la creation du projet se lance en nous posant des questions comme ceci :

Illustration des questions pour la création du projet NextJS

‘create-next-app’ : créera un dossier avec le nom de notre projet et installera les dépendances requises.

Installation manuelle :

La création manuelle du projet nextJS consiste à installer Next.js, React et React-DOM. Commençons par initialiser le fichier package.json avec la commande npm init -y dans le dossier de notre choix pour y installer notre projet. Après, installons les dépendances à l’aide de commande suivante : npm install next@latest react@latest react-dom@latest . Cela installera les dernières versions de Next.js, React et React-DOM.

Et pour compléter notre installation, nous allons copier les scripts ci-dessous dans le fichier package.json:

				
					{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
}
				
			

Ces scripts se réfèrent aux différentes étapes de développement d’une application :

  • dev : exécute next dev pour démarrer Next.js en mode développement.
  • build : exécute next build pour construire l’application pour une utilisation en production.
  • start : exécute next start pour démarrer un serveur de production Next.js.
  • lint : exécute next lint pour configurer ESLint intégré à Next.js.

Finalement, notre fichier package.json sera comme ceci : package.json

				
					{
  "name": "programme",
  "version": "1.0.0",
  "description": "App Nextjs",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
				
			

Créer une nouveau projet Next.js

Réalisons maintenant les étapes d’installation que nous avons vues précédemment. Tout d’abord, initialisons le fichier package.json en utilisant la commande : npm init -y . Cela nous donne un contenu comme ceci dans ce fichier :

				
					{
"name": "programme",
"version": "1.0.0",
"description": "app nextJS",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
				
			

Les attributs name et description sont personnalisables selon votre choix mais moi je les a mis programme et app NextJS .

Ensuite, ajoutons les cripts dans ce fichier et finalement, nous aurons le contenu comme ceci dans ce fichier :

				
					{
"name": "programme",
"version": "1.0.0",
"description": "App Nextjs",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "next dev"
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"keywords": [],
"author": "",
"license": "ISC"
}
				
			

Créons maintenant notre page. Pour ce faire, créons le dossier pages et ajoutons-y le fichier index.js. Ce fichier contiendra simplement un contenu de base pour notre page :

				
					 pages/index.js
export default function Page() {
return <h1>Hello, Next.js!</h1>
}
				
			

Lançons maintenant notre application avec la commande npm run dev dans le terminal.

Si tout fonctionne bien, nous aurons un visuel comme ceci dans le navigateur.

Visuel montrant la première page générée par NextJS

Voilà, nous arrivons à demarrer notre premier page avec nextJS. Dans le prochain chapitre, nous allons ajouter des nouvelles pages.

Configurer Webpack pour un projet Next.js

Webpack est un puissant outil de regroupement de modules principalement pour JavaScript, mais il peut transformer des ressources front-end telles que HTML, CSS et images si les bons plugins sont inclus. Il est hautement configurable et est couramment utilisé dans le développement web moderne pour regrouper efficacement les ressources pour la production.

Division du code : Webpack permet de diviser votre code en plus petits morceaux qui peuvent être chargés à la demande. Cela améliore les temps de chargement et les performances.

Cet outil est caractérisé par ses principales caractéristiques, notamment :

  • Loaders : Les loaders nous permettent de prétraiter les fichiers pendant leur regroupe ment. Cela inclut la transformation de TypeScript en JavaScript, le traitement des fichiers CSS, ou même la conversion des images en URIs base64.
  • Plugins : Les plugins peuvent être utilisés pour effectuer une gamme plus large de tâches, telles que l’optimisation des bundles, la gestion des variables d’environnement et l’injection de code.
  • Gestion des ressources : Webpack peut gérer non seulement JavaScript, mais aussi CSS, images, polices et autres ressources, les regroupant efficacement.
  • Serveur de développement : Le serveur de développement Webpack (webpack-dev-server) fournit un simple serveur web et la capacité d’utiliser le rechargement en direct.

Nous aurons besoin de cet outil tout au long de notre projet, il sera donc préférable de le télécharger sur notre machine. Pour cette installation, nous aurons le choix de l’installer localement pour notre projet ou globalement pour notre machine. Nous pouvons voir les détails et les commandes de l’installation sur le site suivant :https://webpack.js.org/guides/installation/

Donc, pour l’installation, voici la commande à exécuter dans le terminal :

Pour une installation locale, positionnons-nous d’abord dans le dossier où nous voulons créer notre projet, puis ouvrons le terminal et tapons la commande : npm install –save-dev webpack.

Illustration de l'installation de Webpack

Pour une installation globale, il suffit d’exécuter la commande suivante dans le terminal :

npm install –global webpack. »

Création d'une app Next.js et des pages

Maintenant, nous allons initialiser notre projet Next.js avec la création de notre Next.js app. Pour cela, nous allons nous rendre sur le lien suivant pour voir la commande d’installation.

https://nextjs.org/learn-pages-router/basics/create-nextjs-app/setup .

Visuel montrant le site contenant le dépôt Git pour initialiser NextJS

Ensuite, clonons le dépôt git en exécutant cette commande dans le terminal :

npx create-next-app@latest nextjs-blog –use-npm –example https://github.com/vercel/next-learn/tree/main/basics/learn-starter

Figure montrant le succès du clonage du dépôt Git

Maintenant, nous allons exécuter le serveur de développement. Nous avons maintenant un nouveau répertoire appelé nextjs-blog. Allons dans ce répertoire avec la commande cd nextjs-blog et puis exécuter le projet avec la commande npm run dev et nous aurons un visuel comme ceci dans notre navigateur dans le port 3000 :

Contenu par défaut du projet après avoir initialisé le projet NextJS

Parfait, nous avons réussi à créer notre Next.js app avec succès. Pour créer une nouvelle page, créons maintenant un fichier about.js dans le dossier pages : pages/about.js

				
					function About(){
return< h2>Bienvenue dans ma page about< /h2>;
}
export default About
				
			

Nous y avons simplement ajouté une fonction qui retourne du texte dans une balise h2. Nous pouvons accéder à cette page à partir de l’URL : http://localhost:3000/about

Affichage de ma nouvelle page créée avec NextJS

Voilà, notre nouvelle page s’affiche correctement.

Améliorons notre méthode d’affichage en utilisant un lien. Nous allons créer un lien sur la page d’accueil pour accéder à notre nouvelle page.

Pour importer la bibliothèque Link dans notre fichier index.js ,voici comment nous pouvons le faire

				
					import Link from 'next/link';
				
			

Pour ajouter un espace pour le contenu du lien dans votre fichier pages/index.js, voici comment nous pouvez procéder en ajustant notre code dans la balise main :

				
					<main>
<h1 className={styles.title}>
Welcome to <a href="https://nextjs.org" data-wpel-link="external" target="_blank" rel="external noopener noreferrer">Next.js!</a>
</h1>
<p className={styles.description}>
Get started by editing <code>pages/index.js</code>
</p>
<div className={styles.grid}>
<a href="https://nextjs.org/docs" className="{styles.card}" data-wpel-link="external" target="_blank" rel="external noopener noreferrer">
<h3>Documentation &rarr;</h3>
<p>Find in-depth information about Next.js features and API.</p>
</a>
<a href="https://nextjs.org/learn" className="{styles.card}" data-wpel-link="external" target="_blank" rel="external noopener noreferrer">
<h3>Learn &rarr;</h3>
<p>Learn about Next.js in an interactive course with quizzes!</p>
</a>
<a href="https://github.com/vercel/next.js/tree/canary/examples" className="{styles.card}" data-wpel-link="external" target="_blank" rel="external noopener noreferrer">
<h3>Examples &rarr;</h3>
<p>Discover and deploy boilerplate example Next.js projects.</p>
</a>
<a href="https://vercel.com/import?filter=next.js&amp;utm_source=create-next-app&amp;utm_medium=default-template&amp;utm_campaign=create-next-app" className="{styles.card}" data-wpel-link="external" target="_blank" rel="external noopener noreferrer">
<h3>Deploy &rarr;</h3>
<p>
Instantly deploy your Next.js site to a public URL with Vercel.
</p>
</a>
<Link href="/about" >
<a href="#" className="{styles.card}">
<h3>About nextJS &rarr;</h3>
<p>Read about the story and the evolution of Next.js.</p>
</a>
</Link>
</div>
</main>
				
			

Nous avons juste ajouté ce morceau de code pour notre lien vers la page about

				
					<Link href="/about" >
<a href="#" className="{styles.card}">
<h3>About nextJS &rarr;</h3>
<p>Read about the story and the evolution of Next.js.</p>
</a>
</Link>
				
			

En lançant l’application avec la commande npm run dev, nous avons le lien vers la page about dans le navigateur.

Ajout d'un lien pour accéder à une nouvelle page NextJS

En cliquant sur notre lien About nextJS, nous pouvons accéder à cette page dans le même onglet.

Nouvelle page accessible via le lien ajouté dans le projet NextJS

Maintenant, nous allons mettre en place un lien qui retourne vers la page d’accueil dans la page about. Pour faire cela, modifions juste le contenu du fichier pages/about.js comme ceci :

				
					import Link from "next/link";
function About(){
return(
<>
< h2>Bienvenue dans ma page about< /h2>
<Link href = "/"> Home </Link>
</>
)
}
export default About
				
			

Voilà, on a importé la bibliothèque Link d’abord et puis mettre en place le lien. Cela nous donne un résultat comme ceci :

Nouvelle page contenant le lien pour retourner à la page principale

Notre lien pour naviguer vers la page d’accueil s’affiche correctement dans notre nouvelle page. Dans la partie suivante, nous allons refaire la navigation dans un nouveau projet en mettant tout en place manuellement.

Pour commencer, il faut initialiser le projet avec la commande npm init -y. Ensuite, installez les dépendances ReactJS, NextJS et React-DOM avec la commande npm install. Tout cela installe les dépendances et génère les deux fichiers JSON dans notre nouveau dossier.

Visuel montrant les dépendances installées pour le nouveau projet NextJS

Créons maintenant un dossier nommé pages dans notre nouveau projet pour y ajouter le fichier index.js avec un petit contenu : pages/index.js.

				
					export default function Index(){
return(
<h1>Bienvenue dans mon nouveau projet nextJS </h1>
)
}
				
			

En exécutant notre projet avec la commande npm run dev dans le terminal, cela nous donne un résultat comme ceci :

Contenu de l'index du nouveau projet NextJS

L’index du nouveau projet affiche bien son contenu. Créons maintenant notre nouvelle page about. Pour ce faire, ajoutez le fichier about.js dans le dossier pages et ajoutez-y son contenu.

				
					export default function Index(){
return(
<h1>A propos  du nextJS </h1>
)
}
				
			

Nous pouvons accéder à cette nouvelle page à l’aide de l’URL suivante : http://localhost:3000/about . Cela affiche bien son contenu comme prévu

Nouvelle page créée dans le nouveau projet NextJS

Mettons en place le lien pour la navigation entre les pages maintenant. Créons un dossier component et ajoutons-y un fichier links.js pour implémenter nos liens. Ajoutons le contenu suivant : components/links.js.

				
					import Link from "next/link";
export default function Links(){
return(
<ul>
<li> <Link href = "/">Home</Link></li>
<li><Link href = " /about"> About</Link></li>
</ul>
)
}
				
			

Nous importons le composant Link de Next.js. Ce composant permet de créer des liens entre les pages de notre application de manière efficace et optimisée. Puis, nous définissons la fonction Links qui retourne une liste non ordonnée contenant deux éléments de la liste. Chaque élément de liste contient un composant Link avec l’attribut href pointant vers la route respective (« / » pour la page d’accueil et « /about » pour la page à propos).

Pour utiliser ces liens, nous dévons les importer dans les pages. pages/bout.js

Voilà on a importé le composant Links du fichier links.js afin que nous puissions l’appeler dans notre page.

Faisons le même chose dans le fichier : index.js

				
					import Links from '../component/links'
export default function Index(){
return(
<>
<Links/>
<h1>Bienvenue dans mon nouveau projet nextJS </h1>
</>
)
}
				
			

Et puis nous allons demarrer le projet pour tester si nos liens sont corrects avec la commande habituelle : npm run dev

Page d'accueil de NextJS avec liens de navigation

Ça y est, tout fonctionne bien maintenant. Nos liens s’affichent correctement et nous pouvons naviguer vers la page About à partir de son lien

Page About de NextJS avec liens de navigation

Et lien qui nous permet de revenir à la page d’accueil est bien affiché aussi.

Créer un Header et un Layout dans Next.js

Dans cette partie, nous allons explorer les deux éléments cruciaux pour la mise en page de votre site web : le Header et le Layout. Le header constitue la partie supérieure de la page, souvent utilisée pour le logo et la navigation principale. Quant au layout, il définit la structure générale de votre page, organisant ses différentes sections de manière efficace et attrayante. Découvrons maintenant comment ces éléments peuvent améliorer l’expérience utilisateur et la gestion de notre projet web.

Implémentons-les maintenant. Pour ce faire, créons le fichier header.js dans le dossier components : components/header.js

				
					import Link from "next/link";
export default function Links(){
return(
<ul>
<li> <Link href = "/">Home</Link></li>
<li><Link href = " /about"> About</Link></li>
</ul>
)
}
				
			

Voilà, nous avons simplement copié le code du fichier links.js, donc nous pouvons maintenant supprimer le fichier links.js. Ensuite, créons le fichier layout.js dans le même dossier avec le contenu suivant : components/layout.js.

				
					import Header from './header';
const layoutStyle = {
    margin: 20,
    padding: 20,
    border: "1px solid #DD",
};
export default function Layout(props){
    return(
        <div style={layoutStyle}>
            <Header/>
            {props.children}
        </div>
    );
}
				
			

Nous avons importé le composant Header depuis le fichier header.js situé dans le même répertoire.

On a aussi défini un objet JavaScript (layoutStyle) qui contient les styles CSS pour le composant Layout. Ces styles incluent une marge de 20 pixels, un padding de 20 pixels, et une bordure de 1 pixel solide de couleur #DD (gris clair).

Nous exportons par défaut la fonction nommée Layout qui prend props en argument. Le composant Layout retourne une <div> avec le style layoutStyle. À l’intérieur de cette <div>, <Header /> est inclus pour afficher le contenu du composant Header.

{props.children} est utilisé pour inclure tout contenu enfant passé au composant Layout. Cela permet au Layout d’encapsuler dynamiquement différents contenus sans les connaître à l’avance.

Nous avons mis en place l’header de notre page et le layout. Donc, imortons le layout dans nos pages pour que chaque page prend les propriétés du layout . pages/index.js :

				
					import Layout from '../component/layout';
export default function Index(){
return(
<Layout>
<h1>Bienvenue dans mon nouveau projet nextJS </h1>
</Layout>
);
}
				
			

L’importation du composant Layout est suivie par le retour d’un élément JSX dans le composant Index, enveloppé par ce dernier. Ce <Layout> encadre le contenu spécifique de la page, ici représenté par un titre <h1>.

Voyons maintenant la structure de nos pages en lancant le projet avec la commande habituelle : npm run dev.

Page About de NextJS avec mise en forme layout et header

Voilà, notre page index est mis en forme grâce aux propriétés css dans le fichier layout.js et pareil pour la page about comme nous pouvons le voir ci-dessous.

 

Page About de NextJS avec mise en forme layout et header

Parfait, nous avons terminé cette partie avec succès et par la prochaine partie, nous allons mettre en forme nos pages à l’aide des propriétés css .

Utiliser CSS dans un projet Next.js

Nous explorerons comment tirer parti de Next.js pour intégrer et gérer efficacement les styles CSS dans vos projets. Nous aborderons les meilleures pratiques, les méthodes de gestion des styles, et comment optimiser l’intégration de CSS pour des applications performantes et esthétiques. Pour faire cela , voyons maintenant les modifications dans le fichier component/header.js

				
					import Link from "next/link";
export default function Header(){
return(
<ul>
<li><Link href = "/">Home</Link></li>
<li><Link href = " /about">About </Link></li>
<style jsx></style>
</ul>
)
}
				
			

Nous avons ajouté des propriétés css pour notre liste .

Pour le sélecteur ul , nous lui avons donné des propriétés :

  • padding-left: 0; : Supprime le padding à gauche par défaut des listes <ul>.
  • width: 20%; : Définit la largeur de l’élément <ul> à 20% de la largeur de son conteneur.
  • display: flex; : Utilise Flexbox pour disposer les éléments enfants (les <li> dans ce cas) en ligne.
  • justify-content: space-between; : Distribue les éléments enfants avec un espacement égal entre eux, en laissant un espacement avant le premier et après le dernier élément.
  • list-style-type: none; : Supprime les puces par défaut des listes.
  • text-align: left; : Aligne le texte à gauche à l’intérieur de la liste.

Pour le sélecteur ul li :

margin-right: 20%; : Ajoute une marge à droite de 20% à chaque élément <li> de la liste.

Grâce à ces propriétés, notre page a pris une forme comme ceci :

Page index d'un projet Next.js mise en forme avec du CSS

Nous arrivons à donner des propriétés css pour nos pages avec nextJS maintenant.

Gérer les métadonnées dans un projet Next.js

Les métadonnées jouent un rôle crucial dans toute application web, fournissant des informations essentielles aux moteurs de recherche, aux réseaux sociaux et aux utilisateurs eux-mêmes. En utilisant Next.js, nous pouvons facilement gérer et optimiser ces informations pour améliorer la visibilité et l’expérience utilisateur de notre application.

Dans ce chapitre, nous explorerons comment intégrer efficacement des métadonnées telles que les balises <meta> et <title> dans notre application Next.js. Nous aborderons leur importance, leur utilisation correcte et les meilleures pratiques.

Comme nous pouvons remarquer sur le résultat dans le navigateur, l’onglet de notre projet retourne son URL (soit localhost :300 ou localhost :300/about) comme nous pouvons voir dans ce visuel.

Page index d'un projet Next.js mise en forme avec du CSS

L’URL de la page est identique à celle de l’onglet. Nous allons donc personnaliser l’onglet en fonction de son nom. Voyons maintenant les modifications dans le fichier component/header.js.

				
					import Head from "next/head";
import Link from "next/link";
export default function Header(){
return(
<>
<Head>
<title>Titre</title>
</Head>
<ul>
<li><Link href = "/">Home</Link></li>
<li><Link href = " /about">About </Link></li>
<style jsx></style>
</ul>
</>
)
}
				
			

Nous avons importé le composant Head de Next.js et ajouté une balise title à l’intérieur de la balise Head.

En lançant notre projet, nous aurons une modification au niveau de l’onglet comme ceci :

Changement de l'onglet de la page NextJS en titre personnalisé

Auparavant, l’onglet de la page affichait simplement « localhost:3000 » ou « localhost:3000/about« . Désormais, il affiche « Titre« . Cependant, ce titre reste statique pour toutes les pages. Nous allons maintenant le rendre dynamique.

Voyons les modifications dans chaque fichier des pages : component/header.js

				
					import Head from "next/head";
import Link from "next/link";
export default function Header({title}){
return(
<>
<Head>
<title>{title}</title>
</Head>
<ul>
<li><Link href = "/">Home</Link></li>
<li><Link href = " /about">About </Link></li>
<style jsx></style>
</ul>
</>
)
}
				
			

Nous avons ajouté la balise <title> à l’intérieur de la balise <Head>, en utilisant la propriété title passée au composant.
Dans le fichier pages/about.js : 

				
					import Layout from '../component/layout';
export default function About(){
const title = "About";
return(
<Layout title = {title}>
< h2>Bienvenue dans la page about< /h2>
</Layout>
);
}
				
			

On a déclaré le constant const qui prend sa valeur correspondante qui est about pour cette page. Et puis on le passe en propriété de la balise Layout .

Et même chose pour la page index : pages/index.js

				
					import Layout from '../component/layout';
export default function Index(){
const title = "Home";
return(
<Layout title ={title}>
<h1>Bienvenue dans mon nouveau projet nextJS </h1>
</Layout>
);
}
				
			

Pour finir la modification, nous allons passer toutes les propriétés reçues par le composant Layout au composant Header. Cela permet au Header d’accéder aux mêmes propriétés. component/layout.js

				
					import Header from './header';
const layoutStyle = {
margin: 20,
padding: 20,
border: "1px solid #DDD"
};
export default function Layout(props){
return(
<div style={layoutStyle}>
<Header {...props}/>
{props.children}
</div>
);
}
				
			

La ligne de code nous permet de passer les propriétés reçues par le composant Layout au Header est la suivante :

				
					<Header {...props}/>
				
			

Lançons l’application maintenant avec la commande npm run dev pour vérifier si nous atteignons notre objectif.

Illustration du changement de l'onglet de la page Home en "Home"
Illustration du changement de l'onglet de la page About en "About"

Voilà, on a atteint avec succès notre objectif.

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

Utiliser les ressources statistiques dans un projet Next.js

Les données sont essentielles pour optimiser les performances et améliorer l’expérience utilisateur dans le développement web. Next.js, en tant que framework puissant, offre des outils pour intégrer, manipuler et visualiser des données statistiques. Cette partie explore comment utiliser Next.js pour accéder à diverses sources de données, les intégrer dans notre application et les présenter de manière claire. Nous allons créer un dossier public dans notre projet et y placer les données statistiques.

Dans ce dossier public, nous trouvons et plaçons toutes les données statiques pour notre application. Maintenant, nous allons voir comment importer ces données dans notre application. Mais avant de nous lancer, il est préférable de consulter le site officiel de Next.js pour découvrir les techniques d’importation, etc., via le lien suivant : https://nextjs.org/learn-pages-router/basics/assets-metadata-css/assets . Nous y trouvons le détail et les codes par défaut pour manipuler ces données. Voici un visuel montrant un exemple de code :

Exemple de code important pour importer des données statiques dans NextJS

Implémentons maintenant le code pour importer nos données. Pour ce faire, reprenons les données du dossier public de la partie numéro 4 de ce chapitre et copions-les dans le nouveau dossier public de notre projet en cours. component/header.js

				
					import Head from "next/head";
import Link from "next/link";
export default function Header({title}){
return(
<>
<Head>
<title>{title}</title>
</Head>
<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt = "vercel logo" className="logo" data-lazy-src="/vercel.svg"><noscript><img src = "/vercel.svg" alt = "vercel logo" className="logo"></noscript></img>
<ul>
<li><Link href = "/">Home</Link></li>
<li><Link href = " /about">About </Link></li>
<style jsx></style>
</ul>
</>
)
}
				
			

Nous avons cette ligne de code qui nous permet d’importer l’image vercel.svg depuis le dossier public :

				
					<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt = "vercel logo" className="logo" data-lazy-src="/vercel.svg"><noscript><img src = "/vercel.svg" alt = "vercel logo" className="logo"></noscript></img>
				
			

Tout cela nous donne un résultat comme ceci.

Affichage de la première donnée statique dans l'application NextJS

Voilà, notre image s’affiche correctement et voici la démonstration concernant les données statistiques. Nous pouvons appliquer un style global à notre page, et c’est le sujet de la prochaine partie.

Appliquer des styles globaux dans un projet Next.js

Les modules CSS sont utiles pour les styles au niveau des composants. Mais si nous voulons que certains CSS soient chargés par chaque page, Next.js prend également en charge cela. Pour charger le CSS global dans notre application, créons un fichier appelé _app.js dans le dossier pages avec le contenu suivant :

				
					export default function App({ Component, pageProps }) {
return <Component {...pageProps} />;
}
				
			

Donc par la suite comment ajouter de CSS global alors ? Ne vous inquiétez, on est là pour apprendre.

Dans Next.js, nous pouvons ajouter des fichiers CSS globaux en les important depuis pages/_app.js. Nous ne pouvons pas importer de CSS global ailleurs. La raison pour laquelle le CSS global ne peut pas être importé en dehors de pages/_app.js est que le CSS global affecte tous les éléments de la page. Si Nous devons naviguer de la page d’accueil à la page /posts/first-post, les styles globaux de la page d’accueil affecteraient /posts/first-post de manière non intentionnelle. Nous pouvons placer le fichier CSS global n’importe où et utiliser n’importe quel nom.

Passons maintenant à la création du fichier global.css dans le dossier pages et ajoutons-y le contenu suivant :

				
					html,
body {
padding: 0;
margin: 0;
font-family:
-apple-system,
BlinkMacSystemFont,
Segoe UI,
Roboto,
Oxygen,
Ubuntu,
Cantarell,
Fira Sans,
Droid Sans,
Helvetica Neue,
sans-serif;
line-height: 1.6;
font-size: 18px;
}
* {
box-sizing: border-box;
}
a {
color: #0070f3;
text-decoration: none;
}
a:hover {
text-decoration: underline;
color:#44bd32;
}
img {
max-width: 100%;
display: block;
}

				
			

N’oublie pas d’importer ce fichier dans le fichier _app.js .

				
					import './style.css';
export default function App({ Component, pageProps }) {
return <Component ...pageProps} />;
}
				
			

Pour voir le résultat, lançons notre application en utilisant la commande habituelle : npm run dev.

Résultat global de l'application NextJS après application du CSS global

Voilà, notre propriété CSS est bien appliquée à notre page. À partir de maintenant, nous pouvons utiliser la méthode CSS-in-JS ou CSS global pour la mise en page avec CSS.

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.

Routes Dynamiques dans un projet Next.js

Les routes dynamiques sont une fonctionnalité puissante de Next.js qui permet de créer des pages dynamiques basées sur des paramètres de route. Contrairement aux routes statiques, où chaque page a un chemin fixe, les routes dynamiques permettent de générer des pages en fonction des données ou des paramètres passés dans l’URL. Dans ce chapitre, nous explorerons comment créer et utiliser des routes dynamiques dans Next.js. Nous verrons comment configurer des routes dynamiques, comment passer des paramètres de route, et comment utiliser ces paramètres pour rendre des pages dynamiques.

Pour atteindre cet objectif, mettons d’abord en place les routes statiques. Pour ce faire, ajoutons un autre lien dans le fichier header.js.

				
					import Head from "next/head";
import Link from "next/link";
export default function Header({title}){
return(
<>
<Head>
<title>{title}</title>
</Head>
<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt = "vercel logo" className="logo" data-lazy-src="/vercel.svg"><noscript><img src = "/vercel.svg" alt = "vercel logo" className="logo"></noscript></img>
<ul>
<li><Link href = "/">Home</Link></li>
<li><Link href = " /about">About </Link></li>
<li><Link href = " /blog">Blog </Link></li>
<style jsx></style>
</ul>
</>
)
}
				
			

On a ajouté juste la ligne de code suivant pour ajouter le lien Blog :

				
					<li><Link href = " /blog">Blog </Link></li>
				
			

Cela nous donne un résultat comme ceci :

Illustration du lien blog permettant d'accéder aux articles dans NextJS

Voilà, notre lien Blog est présent maintenant. Cependant, cela nous mène à une page 404 si on clique dessus car la page n’existe pas encore. Mettons donc en place cette page maintenant.

Pour ce faire, créons un dossier blog dans le dossier pages et ajoutons-y le fichier index.js avec le contenu suivant : pages/blog/index.js

				
					export default function Blog(){
return(
<ul>
<li>Blog post #1</li>
<li>Blog post #2</li>
<li>Blog post #3</li>
</ul>
);
}
				
			

En lancant notre application, voilà le résultat montant nos listes de poste.

Visuel montrant la liste des postes disponibles pour la route dynamique dans NextJS

Passons maintenant à la création de routes dynamiques. Commençons par rendre nos listes cliquables et leur donner le même agencement que les autres pages.

				
					import Link from "next/link";
import Layout from "../../component/layout";
export default function Blog() {
const title = 'Posts';
return (
<Layout title={title}>
<ul>
<li>
<Link href="/blog/post-1">
Blog post #1
</Link>
</li>
<li>
<Link href="/blog/post-2">
Blog post #2
</Link>
</li>
<li>
<Link href="/blog/post-3">
Blog post #3
</Link>
</li>
</ul>
</Layout>
);
}
				
			

Cela nous donne un résultat comme ceci de rendre les postes cliquable.

Illustration des listes de postes cliquables dans un projet NextJS
				
					import { useRouter } from "next/router";
import Layout from "../../component/layout";
export default function Post(){
const router = useRouter();
return(
<Layout title = {router.query.title}>
<p>Blog {router.query.title}</p>
<p>Bienvenue dans mon blog poste</p>
</Layout>
)
}
				
			

Le nom [title].js est utilisé dans Next.js pour définir une route dynamique qui capture un segment spécifique de l’URL comme un paramètre nommé title. Le crochet [title] indique à Next.js qu’il s’agit d’une partie de l’URL qui est dynamique et peut varier en fonction de la valeur spécifiée dans cet emplacement de l’URL.

Nous avons aussi fait les importations nécessaires pour notre page.

const router = useRouter();: Utilise le hook useRouter pour récupérer l’objet router, qui fournit des informations sur l’URL de la page en cours.

<Layout title={router.query.title}>: Utilise le composant Layout et passe router.query.title comme prop title. router.query.title récupère la valeur du paramètre title de l’URL actuelle. Par

<p>Blog {router.query.title}</p>: Affiche le titre de l’article de blog en utilisant router.query.title.

Pour finir, voyons les modifications dans le fichier index.js : pages/blog/index.js

				
					import Link from "next/link";
import Layout from "../../component/layout";
function PostNode({ title }) {
return (
<li>
<Link href="/blog/[title]" as={`/blog/${title}`}>
Blog {title}
</Link>
</li>
);
}
export default function Blog() {
const title = 'Posts';
return (
<Layout title={title}>
<ul>
<PostNode title="post-1" />
<PostNode title="post-2" />
<PostNode title="post-3" />
</ul>
</Layout>
);
}
				
			

import Link from « next/link »;: Importe le composant Link de Next.js, utilisé pour créer des liens de navigation entre les pages.

import Layout from « ../../components/layout »;: Importe le composant Layout depuis le chemin relatif ../../components/layout, utilisé pour structurer la mise en page générale de la page des articles de blog.

function PostNode({ title }) { … }: Définit une fonction PostNode qui prend un paramètre title. Cette fonction rend un élément <li> contenant un lien <Link> de NextJS.

<Link href= »/blog/[title] » as={/blog/${title}}>: Utilise <Link> pour créer un lien vers une route dynamique /blog/[title]. L’attribut href spécifie le chemin de la page dynamique, où [title] est un paramètre dynamique dans l’URL. L’attribut as définit le chemin réel affiché dans l’URL du navigateur, en remplaçant [title] par la valeur de title.

Blog {title}: Texte affiché pour chaque lien de blog, suivi du titre de l’article.

<Layout title={title}>: Utilise le composant Layout et passe title comme prop title. Layout est utilisé pour maintenir la structure cohérente de la mise en page de toutes les pages de l’application.

<ul> … </ul>: Liste non ordonnée qui contient plusieurs éléments <PostNode>, chacun représentant un lien vers un article de blog différent.

<PostNode title= »post-1″ />, <PostNode title= »post-2″ />, <PostNode title= »post-3″ />: Chaque PostNode est un composant <li> contenant un lien vers un article de blog spécifique. Les titres « post-1″, « post-2 », « post-3 » sont passés comme propriété title à chaque PostNode.

Routes Dynamiques : En définissant href= »/blog/[title] » dans <Link>, NextJS crée une route dynamique où [title] est un paramètre pouvant être remplacé par différents titres d’articles de blog.

En lançant notre application, nous aurons le résultat comme ca :

Visuel montrant la route dynamique du blog dans NextJS

Chaque article du blog possède sa propre route de manière dynamique, parfait nous avons terminé cette partie avec succès.

Conclusion

En conclusion, le projet Next.js offre une flexibilité et une puissance incroyables pour le développement d’applications web modernes. Grâce à ce guide, vous avez maintenant les connaissances nécessaires pour installer, configurer et optimiser votre projet Next.js. Nous avons couvert les aspects essentiels, tels que l’intégration de Webpack, la navigation entre les pages, l’utilisation de CSS, et la gestion des métadonnées. En appliquant ces pratiques, vous pourrez créer des applications Next.js robustes et performantes. Continuez à explorer et à expérimenter avec Next.js pour tirer le meilleur parti de ce framework puissant et rester à la pointe du développement web. Et par la suite nous allons traiter dans le volet suivant la récupération des données 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.