Découvrir Next.js : Les Bases Indispensables

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

Vous avez suivi notre précédent article sur les principes de base de Next.js pour débutants et vous êtes maintenant prêt à passer à l’étape suivante ? Ce tutoriel Next.js est conçu pour vous guider à travers chaque étape essentielle, de l’installation à la compréhension de la structure des dossiers, en passant par le lancement de votre première application. Grâce à ce guide complet, vous apprendrez non seulement à installer Next.js, mais aussi à exploiter ses fonctionnalités avancées pour optimiser le SEO de vos applications web. Suivez ce tutoriel Next.js et découvrez comment ce framework peut transformer votre manière de développer des applications React. 

Tutoriel Next.jS : Découvrir Next.jS

Comme nous l’avons vu dans l’article précédent, 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 :

Tutoriel Next.js :

 

  • 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.

Tutoriel Next.jS : Installer Next.jS Facilement

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 tutoriel Next.js, 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
				
			
Exécution de la commande pour installer Next.js dans le terminal.

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 :
Capture d'écran du récapitulatif de l'installation de Next.js.

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

Découvrir la hiérarchie de Next.jS : Structure des 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 :

Structure des dossiers d'un projet Next.js dans l'éditeur.

Voici un aperçu de la hiérarchie générale  que nous avons besoin dans notre tutoriel Next.js:

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

Lancer Next.jS : Démarrer Votre Application

l est maintenant temps de lancer notre application pour voir 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 utilisé pour l’installation tout à l’heure et taper la commande suivante :

Tutoriel Next.js :

				
					npm run dev
				
			
Saisie de la commande npm run dev pour lancer l'application.

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 tutoriel 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 du projet Next.js via le terminal.

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 :

 

Résultat visible dans le navigateur après exécution de Next.js.

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.

Tutoriel Next.js : Analysons le contenu du fichier app/page.js pour voir comment il est structuré et ce qu’il affiche.

				
					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.

Tutoriel Next.jS : Fonctionnement des Pages

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  notre tutoriel 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é cet article et nous allons approfondir notre compréhension de Next.js dans les articles à venir.

Conclusion

En suivant ce tutoriel Next.js, vous avez maintenant toutes les clés en main pour installer, structurer et lancer efficacement une application Next.js. Vous avez appris à naviguer dans la hiérarchie des dossiers, à exécuter les commandes nécessaires et à comprendre le fonctionnement des pages. Next.js offre des avantages considérables, notamment en matière de SEO et de performance. Continuez à explorer ses fonctionnalités avancées pour maximiser le potentiel de vos projets web. Avec ce tutoriel Next.js, vous êtes prêt à développer des applications robustes et performantes. Et par la suite nous allons traiter dans le volet suivant la création des liens avec 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.