Premiers Pas avec Next.js : Ce Qu’il Faut Savoir

L'Équipe Alphorm
L'Équipe Alphorm Ajouter un commentaire 12e lecture en min

Découvrez Next.js, le framework basé sur React qui transforme la création et la gestion des applications web modernes. Avec ses fonctionnalités avancées comme le rendu côté serveur et un système de routage intégré.

Introduction à Next.js : Pourquoi Choisir ce Framework ?

Next.js est un framework JavaScript construit sur React. Par conséquent, il est relativement simple à apprendre si vous maîtrisez déjà ReactJS18. Nous allons étudier la version 13 de Next.js.

Vous vous demandez peut-être pourquoi il est nécessaire d’apprendre Next.js alors que ReactJS est déjà capable de créer une interface utilisateur robuste ?!

En effet, vous avez raison de poser cette question. Cependant, il est important de souligner que l’apprentissage de Next.js ne sera pas une perte de temps. En fait, Next.js apporte plusieurs fonctionnalités supplémentaires à React, notamment :

  • Système de routage intégré : Next.js propose un système de routage intégré qui simplifie la gestion des différentes routes de votre application web.
  • Prise en charge du rendu côté serveur et côté client : Next.js prend en charge le rendu côté serveur et côté client, ce qui améliore les performances et l’expérience utilisateur de votre application.
  • Amélioration du référencement (SEO) : Next.js offre des fonctionnalités intégrées qui permettent d’améliorer le référencement de votre application web, notamment la pré-rendu statique et la génération de pages dynamiques côté serveur.

Guide Complet pour Installer Next.js Efficacement

Pour entamer l’installation de Next.js, nous suivrons une procédure simple et efficace. Sachant que vous maîtrisez déjà ReactJS, qui est un prérequis pour cette formation, nous considérons que Node.js est déjà installé sur votre système. Ensuite, nous utiliserons npm ou yarn, les gestionnaires de paquets JavaScript, pour créer un nouveau projet Next.js.

Donc pour commencer notre installation, on va créer un dossier pour stocker notre application et y installer aussi nextjs.

Pour cette formation, nous opterons pour le nom « nextjs » pour notre dossier. Ensuite, vous devrez ouvrir ce dossier dans le terminal afin de pouvoir procéder à l’installation. Une fois positionné dans le dossier via le terminal, veuillez saisir la commande suivante :

				
					npx create-next-app@latest
				
			
Saisie de la commande initiale dans un projet Next.js
Saisie de commande dans un terminal
Exécution de commande dans l'environnement Next.js
Exécution de commande dans Next.js

Lorsque vous avez exécuté la commande, le processus d’installation vous invite à répondre à plusieurs questions : Vous pouvons utiliser les touches de direction sur le clavier pour choisir la reponse de votre choix.

  • « What is your project named? » : Vous devez entrer le nom de votre projet. Dans notre, le nom qu’on a choisi est « my_app« .
  • « Would you like to use TypeScript? » : Vous pouvez choisir d’utiliser TypeScript ou non. Vous devez répondre par « Yes » ou « No », mais on a choisi non comme reponse, on ne va pas TypeScript dans cette formation.
  • « Would you like to use ESLint? » : Vous avez la possibilité d’utiliser ESLint pour le linting de votre code JavaScript ou TypeScript. Vous pouvez choisir « Yes » ou « No », on a reponsu non pour le moment.
  • « Would you like to use Tailwind CSS? » : Vous pouvez choisir d’utiliser Tailwind CSS pour styler votre application. Répondez par « Yes » ou « No », on a choisi non car nous allons gerer nous meme les styles css de notre application.
  • « Would you like to use src/ directory? » : Vous pouvez choisir d’utiliser un répertoire src/ pour vos fichiers sources. Répondez par « Yes » ou « No ».
  • « Would you like to use App Router? (recommended) » : Vous pouvez choisir d’utiliser un routeur d’application. Cette option est recommandée. Répondez par « Yes » ou « No ». Comme il est recommandé, donc nous pouvons le repondre yes.
  • Would you like to customize the default import alias (@/*)? … No / Yes : cela concerne la personnalisation de l’alias d’importation par défaut dans votre projet Next.js.

Par défaut, Next.js utilise un alias d’importation @/ pour référencer le répertoire racine de votre projet.

Une fois l’installation terminée, vous recevrez des messages semblables à ceux-ci pour récapituler le processus d’installation dans le terminal :

Récapitulation du processus d'installation
Processus d'installation

Il est bien mentionné qu’il vient d’installer react, react-dom et next. Parfait.

Exploration de la Structure de Dossiers

Découvrir la hiérarchie de Next.js implique de comprendre la structure de fichiers et de dossiers qui composent un projet Next.js typique.

Donc, si vous ouvrez le dossier de votre application dans votre éditeur de texte. Vous aurez une structure de dossier de dossier comme ceci :

Visualisation de la structure de dossier
Structure de dossier

Voici un aperçu de la hiérarchie générale :

Dossier app : C’est l’un des dossiers les plus importants de Next.js. Il contient les fichiers qui correspondent aux différentes routes de votre application. Chaque fichier JavaScript (ou TypeScript) dans ce dossier définit une page de votre application.

Dossier public : Ce dossier est destiné aux ressources statiques de votre application, telles que les images, les fichiers CSS, les fichiers JavaScript, etc. Les fichiers de ce dossier sont accessibles directement via l’URL de votre application.

Fichier package.json : Comme dans tout projet Node.js, le fichier package.json contient les dépendances et les scripts de votre application Next.js. Vous pouvez y définir les dépendances de votre projet ainsi que les scripts pour démarrer votre application en mode développement, la construire pour la production, etc.

				
					{
"name": "my_app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"react": "^18",
"react-dom": "^18",
"next": "14.1.0"
}
}
				
			

Vous pouvez y trouver aussi le nom de votre application et la version de NextJS installer dans votre machine.

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

Démarrage de Votre Projet avec Next.js : Étapes Clés

Il est maintenant temps de lancer notre application pour vois ce qu’elle va nous afficher.
Pour lancer votre application Next.js, suivez ces étapes simples

Premièrement, vous allez reprendre votre terminal comme nous l’avons utiliser pour l’installation de tout de l’heure et taper la commande :

 

				
					npm run dev
				
			
Taper la commande npm run dev dans Next.js
Démarrage de Next.js avec npm run dev

Oh, des erreurs s’affichent. Eh bien, pourquoi cela arrive-t-il ? Apparemment, il semble que le fichier package.json ne soit pas lu, ce qui suggère que je ne suis pas dans le bon répertoire pour lancer mon application. Pour résoudre cette erreur, assurez-vous d’être dans le répertoire de votre projet Next.js : Ouvrez votre terminal et accédez au répertoire racine de votre projet Next.js à l’aide de la commande cd.

Voyons comment en faire maintenant :

Accès au répertoire racine via la commande cd dans Next.js
Accès au répertoire racine dans Next.js

Comme vous constatez que j’ai navigué dans mon bon répertoire my_app à l’aide de la commande :

cd my_app et quand je suis là-dedans , je retape ma commande : npm run dev et voilà, tout fonctionne bien et prêt.

Donc, pour voir notre application par defaut, on ouvre dans le navigateur l’URL suivant :

http://localhost:3000

Et si tout fonctionne bien, on aura quelque chose ceci :

Affichage du résultat après exécution de la commande
Résultat de commande

D’accord, il mentionne bien que ce contenu est obtenu par le fichier app/page.js. Pour mieux comprendre ce qui se trouve à l’intérieur de ce fichier, examinons-le attentivement.

				
					import Image from "next/image";
import styles from "./page.module.css";
export default function Home() {
return (
<main className={styles.main}>
……………………
</main>
);
}
				
			

Maintenant que nous avons établi qu’il s’agit d’un composant React, c’est la raison pour laquelle nous avons mentionné que Next.js est basé sur React.js.

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.

Fonctionnement des Pages et Routage

Comprendre le fonctionnement des pages avec Next.js » est un aspect fondamental de la création d’applications web avec Next.js, un framework JavaScript populaire basé sur React. Dans Next.js, les pages sont des composants React spéciaux qui définissent les routes de l’application. Next.js offre un système de routage automatique basé sur la structure des fichiers dans le dossier app.

Donc pour mieux comprendre ce fonctionnement, on va un petit tour sur les differents fichier de notre application. Premièrement, dans le dossier app, on a deux fichiers : layout.js , page.js et des fichiers css

Examinons maintenant le fichier layout.js :

				
					import { Inter } from "next/font/google";
import "./globals.css";
const inter = Inter({ subsets: ["latin"] });
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body data-rsssl=1 className={inter.className}>{children}<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
);
}
				
			

Le fichier global.css est importé pour inclure les styles globaux, tandis que la structure de base de notre page web, comme les métadonnées (metadata) contenant le titre et la description, est définie.

Ensuite, dans le fichier app/page.js, divers fichiers sont importés, notamment des fichiers CSS, etc. Ce fichier contient le contenu principal de notre page. En résumé, le fonctionnement de Next.js est similaire à celui de React.js. Par conséquent, si vous comprenez bien React.js, il vous sera évidemment facile de comprendre Next.js.

Bien, nous avons achevé ce chapitre et nous allons approfondir notre compréhension de Next.js dans les chapitres à venir.

Conclusion

En conclusion, ce chapitre a introduit les bases de Next.js, un framework basé sur React qui offre des fonctionnalités avancées comme le routage automatique et le rendu côté serveur. Nous avons couvert l’installation, la structure du projet, et la gestion des pages, préparant ainsi le terrain pour une utilisation plus approfondie de Next.js dans le développement web. Ces connaissances vous permettront de tirer pleinement parti des capacités de Next.js dans vos futurs projets. Et par la suite nous allons traiter dans le volet suivant un tutoriel complet pour apprendre 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.
Laisser un commentaire