Créer des icônes dans Next.js

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

Dans cet article, nous allons explorer les interactions avec les icônes dans Next.js, une fonctionnalité essentielle pour rendre vos applications web plus dynamiques et interactives. Tout comme la personnalisation de la police peut transformer l’apparence et la convivialité d’un site web, les interactions avec les icônes peuvent enrichir l’expérience utilisateur en rendant les éléments visuels plus engageants. Grâce à l’utilisation de useState et d’autres techniques de gestion d’événements, vous apprendrez comment manipuler les icônes de manière efficace, que ce soit pour les rendre cliquables, les cacher ou les afficher. Que vous soyez un développeur débutant ou expérimenté, maîtriser les interactions icônes Next.js améliorera considérablement l’expérience utilisateur de vos applications.

Modifier la classe des icônes pour les interactions icônes Next.js

Dans le précédent article, nous avons exploré la manière d’afficher des icônes dans notre application. À présent, nous allons approfondir ce concept en envisageant une interaction avec ces icônes. Par exemple, imaginons que vous souhaitiez rendre une icône cliquable et la faire disparaître lorsqu’elle est cliquée. Nous allons ensemble développer cette idée dans la section suivante.

Pour ce faire, commençons d’abord par la déclaration de classe dans la balise de notre icône. Ainsi, rendez-vous dans le fichier app/page.js et examinons les modifications à apporter à l’intérieur de celui-ci.

				
					import Nav from "./component/nav";
import styles from "./page.module.css";
export default function Home() {
return (
<>
<Nav/>
<div className={`${styles.home} bordure`}>
<h1>Bonjour</h1>
<p><span className={`${styles.curseur} material-symbols-outlined`}>home
</span></p>
<p>Lorem ipsum.</p>
<p><a href="https://www.google.fr" target="_blank" data-wpel-link="external" rel="external noopener noreferrer">Aller vers la page de google</a></p>
</div>
</>
);
}
				
			

La modification se trouve sur cette ligne :

				
					<p><span className={`${styles.curseur} material-symbols-outlined`}>home
</span></p>
				
			

On retrouve encore la déclaration de plusieurs classes pour déclarer la classe curseur, puis nous allons lui appliquer des propriétés CSS pour rendre notre icône cliquable.

Pour finir et atteindre cet objectif, rendez-vous dans le fichier page.module.css pour donner des propriétés à notre classe.

				
					.home{
background-color: white;
width: 75%;
margin: auto;
padding: 15px;
border-radius: 5px;
text-align: center;
}
.home h1{
color: red;
}
.curseur{
cursor:pointer;
}
.curseur:hover{
transform: scale(1.2);
}
				
			

Nous avons ciblé notre classe curseur et lui avons attribué une valeur pour rendre l’icône cliquable, comme vous maîtrisez le CSS. Nous avons également appliqué la propriété hover pour augmenter la taille de notre icône Next.js lorsque le curseur la survole.

Parfait, donc la preuve ultime pour vérifier si tout fonctionne correctement est simplement de démarrer le projet.

Déclarer useState pour les interactions icônes Next.js

Dans cette section, nous allons poursuivre l’interaction avec l’icône. Nous avons déjà rendu l’icône cliquable et augmenté sa taille lorsque le curseur la survole. Cependant, nous allons maintenant essayer de supprimer l’icône si l’utilisateur clique dessus. Pour ce faire, nous devons d’abord déclarer un état (useState) pour implémenter cette fonctionnalité. Voyons la modification au niveau du code dans notre composant : app/page.js

				
					import { useState } from "react";
import Nav from "./component/nav";
import styles from "./page.module.css";
export default function Home() {
const [voir,setVoir] = useState()
return (
<>
<Nav/>
<div className={`${styles.home} bordure`}>
<h1>Bonjour</h1>
<p><span className={`${styles.curseur} material-symbols-outlined`}>home
</span></p>
<p>Lorem ipsum.</p>
<p><a href="https://www.google.fr" target="_blank" data-wpel-link="external" rel="external noopener noreferrer">Aller vers la page de google</a></p>
</div>
</>
);
}
				
			

La modification se trouve sur cette ligne

				
					const [voir,setVoir] = useState()
				
			

Comme vous le savez déjà, voici la manière de déclarer notre useState. Cependant, il est important de vérifier attentivement si useState est correctement importé. Cela se fait avec cette ligne de code

				
					const [voir,setVoir] = useState()
				
			

Parfait, mais si vous démarrez le projet maintenant, il va vous generer une erreur comme ceci :

Illustration de l'utilisation de use Client dans Next.js

L’erreur nous oblige à utiliser « use client ». Comme je l’ai expliqué précédemment dans le chapitre de présentation de Next.js, l’importation de reactjs dans Next.js ne fonctionne pas de la même manière que d’habitude. Nous devons inclure le mot « use client » dans notre composant afin que l’importation de React.js dans notre projet soit fonctionnelle.

Corrigeons cette erreur maintenant en utilisant use client dans notre composant :

				
					'use client'
import { useState } from "react";
import Nav from "./component/nav";
import styles from "./page.module.css";
export default function Home() {
const [voir,setVoir] = useState()
return (
<>
<Nav/>
<div className={`${styles.home} bordure`}>
<h1>Bonjour</h1>
<p><span className={`${styles.curseur} material-symbols-outlined`}>home
</span></p>
<p>Lorem ipsum.</p>
<p><a href="https://www.google.fr" target="_blank" data-wpel-link="external" rel="external noopener noreferrer">Aller vers la page de google</a></p>
</div>
</>
);
}
				
			

Voilà, j’ai ajouté « use client » dans notre composant. Exécutons maintenant pour voir le resultat.

Exemple de correction de l'utilisation de "use client" dans Next.js

Super, notre composant devient fonctionnel maintenant. Donc notre état est prêt à utiliser maintenant.

Déclarer un événement pour les icônes Next.js

Puisque notre état(useState) était bien déclaré, donc il nous reste de programmer une fonction pour cacher l’icone quand l’utilisateur clique dessus. Faisons-le maintenant dans notre composant app/page.js

				
					'use client'
import { useState } from "react";
import Nav from "./component/nav";
import styles from "./page.module.css";
export default function Home() {
const [voir,setVoir] = useState(true)
function Cacher(){
setVoir(false)
}
return (
<>
<Nav/>
<div className={`${styles.home} bordure`}>
<h1>Bonjour</h1>
{
(voir)?
(<p onClick={Cacher}><span className={`${styles.curseur} material- symbols-outlined`}>home</span></p>)
:""
}
<p>Lorem ipsum.</p>
<p><a href="https://www.google.fr" target="_blank" data-wpel-link="external" rel="external noopener noreferrer">Aller vers la page de google</a></p>
</div>
</>
);
}
				
			

Par défaut, notre icône est affichée, ce qui signifie que le getter voir prend true comme valeur initiale. La fonction Cacher est responsable de modifier la valeur du getter via le setter setVoir. Enfin, une condition ternaire est utilisée pour détecter si l’icône est cliquée. Si c’est le cas, la valeur du getter devient false, indiquant ainsi que l’icône doit être cachée.

Voyons le résultat maintenant pour tester si tout fonctionne bien ou pas.

Démarche pour cacher une icône dans une application Next.js

Bien sûr ! L’icône est maintenant supprimée lorsqu’on clique dessus. Super, tout va bien maintenant alors.

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

Gérer plusieurs événements

Plus tôt, nous avons interagi avec une seule icône. Mais que faire si notre application comporte plusieurs icônes et que nous voulons les cacher comme nous l’avons fait précédemment ? Pour ce faire, nous pouvons déclarer deux useState afin de les implémenter : app/page.js

				
					'use client'
import { useState } from "react";
import Nav from "./component/nav";
import styles from "./page.module.css";
export default function Home() {
const [voirhome,setVoirhome] = useState(true)
const [voirblock,setVoirblock] = useState(true)
function Cacher(icone){
if(icone == 'home'){
setVoirhome(false)
}else if(icone == 'block'){
setVoirblock(false)
}
}
return (
<>
<Nav/>
<div className={`${styles.home} bordure`}>
<h1>Bonjour</h1>
{
(voirhome)?
(<p onClick={()=>{Cacher('home')}}><span className={`${styles.curseur} material-symbols-outlined`}>home</span></p>
)
:""
}
{
(voirblock)?

(<p onClick={()=>{Cacher('block')}}><span className={`${styles.curseur} material-symbols-outlined`}>block</span></p>
)
:""
}
<p>Lorem ipsum.</p>
<p><a href="https://www.google.fr" target="_blank" data-wpel-link="external" rel="external noopener noreferrer">Aller vers la page de google</a></p>
</div>
</>
);
}
				
			

On a déclaré deux useState pour nos deux icones. Et puis la fonction Cacher est définie avec un paramètre pour modifier l’état des icônes en fonction de celle qui est cliquée. Si l’argument icone est « home », alors voirhome est défini sur false, et si c’est « block », alors voirblock est défini sur false. Finalement, nous avons dupliqué notre structure de condition ternaire pour détecter quelle icône a été cliquée.

Exécutons maintenant notre projet pour vérifier si nous atteignons nos objectifs.

Voilà d’abord ,nos icones sont affichées correctement.

Exemple d'affichage d'icônes dans une application Next.js

Essayez de les cliquer après

Technique pour cacher plusieurs icônes dans Next.js

Après les avoir cliquées, toutes les icônes ont disparu. Parfait, nous avons terminé cette partie avec succès alors. Dans le prochain chapitre, nous chercherons à factoriser davantage notre code afin de réduire le nombre de lignes.

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.

Factoriser le code pour les interactions icônes Next.js

L’objectif reste le même que précédemment, mais nous constatons une certaine redondance dans notre code, ce qui n’est pas optimal en programmation informatique. Nous allons donc maintenant essayer de factoriser notre code précédent.

Voyons tout de suite la modification au niveau de notre composant app/page.js

				
					'use client'
import { useState } from "react";
import Nav from "./component/nav";
import styles from "./page.module.css";
export default function Home() {
const [icones,setIcones] = useState([
{name: 'home',visible:true},
{name: 'block',visible:true}
])
function Cacher(index){
let updateIcone = [...icones]
updateIcone[index].visible = false
setIcones(updateIcone)
}
return (
<>
<Nav/>
<div className={`${styles.home} bordure`}>
<h1>Bonjour</h1>
{
icones.map((icone,index)=>(
icone.visible?
(<p onClick={()=>{Cacher(index)} }><span className={`${styles.curseur} material-symbols-outlined`}>{icone.name}</span></p>)
: null
))
}
<p>Lorem ipsum.</p>
<p><a href="https://www.google.fr" target="_blank" data-wpel-link="external" rel="external noopener noreferrer">Aller vers la page de google</a></p>
</div>
</>
);
}
				
			

Maintenant, nous avons simplifié la déclaration des useState en initialisant un seul état avec un tableau contenant deux objets. Chaque objet représente une icône avec deux propriétés : name pour le nom de l’icône et visible pour son état de visibilité. La valeur par défaut de la propriété visible est définie à true pour chaque objet, ce qui permet d’afficher les icônes par défaut.

De plus, nous avons optimisé la fonction Cacher de manière cohérente en déclarant une variable pour stocker les icônes. Cela nous permet de cibler et de modifier l’index de l’icône de manière efficace.

Finalement, nous avons utilisé la méthode map pour parcourir toutes les icônes dans notre condition ternaire.

Cela nous donne toujours le même résultat comme ceci après l’exécution du projet.

Exemple de factorisation du code pour la gestion des icônes dans Next.js

Après avoir clique l’icone home voilà ce qui reste  :

Méthode pour cacher l'icône Home dans une application Next.js

Exactement, avec cette méthode, pour ajouter des icônes, vous pouvez simplement rechercher le nom de l’icône sur le site Google Fonts Icons (https://fonts.google.com/icons) et l’ajouter à notre objet de getter. Par exemple, si vous souhaitez ajouter l’icône « download », vous pouvez le faire en ajoutant un nouvel objet à votre tableau icones avec le nom « download » et en définissant sa propriété visible sur true par défaut.

Donc, dans notre composant app/page.js, voilà la modifications dans notre objet  du getter :

				
					const [icones,setIcones] = useState([
{name: 'home',visible:true},
{name: 'block',visible:true},
{name: 'download',visible:true}
])
				
			

Une fois que vous avez ajouté l’icône « download » à votre tableau icones, elle sera automatiquement ajoutée à votre application. Vous pourrez alors interagir avec cette icône de la même manière que les deux icônes précédentes en la cachant lorsque vous cliquez dessus. Voyons cela maintenant.

Exemple d'affichage de l'icône Download dans une application Next.js

c’est génial ! Nous avons réussi à factoriser notre code de manière efficace, ce qui rend notre application plus flexible et facile à maintenir. Avec ce concept, nous terminons donc ce chapitre

Conclusion

En suivant les étapes décrites dans cet article, vous serez désormais capable de gérer efficacement les interactions icônes Next.js. De la modification des classes CSS à la déclaration de useState et la gestion des événements, ces compétences vous permettront d’optimiser vos applications pour une meilleure interactivité. La factorisation de votre code assurera également une meilleure maintenance et évolutivité. N’oubliez pas d’appliquer ces pratiques pour créer des interfaces utilisateurs plus engageantes et réactives.Et par la suite nous allons traiter le volet de map en 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.