Vous souhaitez créer une application web performante, mais la gestion du routage et du SEO avec React peut être complexe et chronophage.
Sans une solution efficace, vous risquez de vous retrouver avec des applications difficiles à optimiser, avec un impact négatif sur la performance et le référencement.
Next.js simplifie ces tâches en offrant un routage intégré, un rendu côté serveur et des fonctionnalités SEO avancées. Découvrez dans cet article comment exploiter ces atouts pour booster vos projets web.
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
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 :
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 :
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.
Devenez expert en développement web dynamique avec NextJS et créez des applications performantes.
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
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 :
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 :
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.
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 className={inter.className}>{children}<script>var rocket_beacon_data = {"ajax_url":"https:\/\/blog.alphorm.com\/wp-admin\/admin-ajax.php","nonce":"dd61cd433a","url":"https:\/\/blog.alphorm.com\/introduction-a-next-js-tout-savoir-pour-debuter","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script><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.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui. Découvrez des cours variés pour tous les niveaux !
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.
