Créer une navigation intuitive et efficace dans une application web peut être complexe avec des composants mal organisés.
Une navigation confuse impacte négativement l’expérience utilisateur, augmente les taux de rebond, et réduit l’engagement. La gestion manuelle des liens devient rapidement un défi sans une approche structurée.
Cet article vous guide sur la création et la mise en forme d’une navigation fluide dans Next.js, avec des techniques claires pour améliorer la structure de vos applications et offrir une expérience optimale aux utilisateurs.
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
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.
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 :
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.
Devenez expert en développement web dynamique avec NextJS et créez des applications performantes.
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
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 :
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.
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.
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 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.
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 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
