Créer et gérer des formulaires de tâches interactifs avec Next.js peut rapidement devenir compliqué, surtout pour maintenir un code propre et réactif.
Des erreurs fréquentes et une mauvaise gestion des états peuvent entraîner des bugs, des frustrations et une expérience utilisateur dégradée.
Cet article vous guide à travers toutes les étapes pour développer un formulaire de gestion de tâches avec Next.js, en vous montrant comment structurer, styliser, et optimiser le code pour une application fluide et performante.
Découvrir l'exercice 1 avec un formulaire Next.js
Parfois, lors d’un projet, nous nous retrouvons souvent à concevoir un formulaire Next.js pour récupérer, envoyer ou ajouter des données à notre base de données, ou encore pour les afficher dans notre application. C’est une pratique courante, car vous avez peut-être déjà maîtrisé ce concept avec d’autres technologies. Maintenant, nous allons l’implémenter en utilisant Next.js. Notre objectif est de créer un formulaire qui nous permettra d’ajouter des tâches, lesquelles seront ensuite affichées juste en dessous du formulaire. Pour concrétiser cela, je vous présente ci-dessous un aperçu visuel du formulaire que nous allons essayer de réaliser :
Hâtez-vous de découvrir les nouvelles compétences, passons désormais à l’action.
Mettre en place le JSX pour un formulaire Next.js
Pour progresser efficacement vers notre objectif, nous allons maintenant établir les fondations de notre exercice en créant le formulaire Next.js qui nous permettra d’ajouter des tâches. Comme nous allons aborder un exercice spécifique, j’ai créé un nouveau projet Next.js dédié à cet exercice en utilisant la commande bien connue : npx create-next-app exercice.
En lançant l’application avec la commande familière npm run dev, nous obtenons la structure par défaut de notre application, illustrée comme suit :
Ensuite, sans perdre de temps, nous allons immédiatement apporter les modifications nécessaires à notre formulaire Next.js pour qu’il réponde à nos besoins.
Pour faire un petit tour dans notre nouveau projet, on va essayer de changer le titre et description de notre application. Pour faire cela, comme vous le savez déjà, on doit se rendre dans le fichier app/layout.js
import { Inter } from "next/font/google";
import "./globals.css";
const inter = Inter({ subsets: ["latin"] });
export const metadata = {
title: "Exercice",
description: "Exercice d'application en nextJS ",
};
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>
);
}
Voilà, on a personnalisé juste le titre et la description :
Puis, nous allons mettre en place le formulaire Next.js qui doit être implémenté dans le fichier app/page.js
export default function Home() {
return (
<div>
<h3><span className="material-symbols-outlined">add</span>
Tache</h3>
<input
type="text"
name="tache"
id="tache"
placeholder="Ajoutre tache"/>
<input
type = "submit"
value = "Valider"
/>
<h4><span className="material-symbols-outlined">task</span>
Liste des taches</h4>
</div>
);
}
Nous avons maintenant configuré notre formulaire de base et comme nous l’avons vu dans l’article précédent, nous avons également appris à afficher une icône. Cela nous amène à une question pratique : pourquoi ne pas mettre en pratique nos connaissances en essayant d’afficher une icône pour l’ajout de tâches et pour la liste de tâches ? Tout semble être en place maintenant, n’est-ce pas ?
Bien sûr, n’oublions pas d’apporter les modifications nécessaires au fichier layout.js en y ajoutant le code qui indique les liens pour les icônes. Vous pouvez examiner comment le faire avec le code ci-dessous :
import { Inter } from "next/font/google";
import "./globals.css";
const inter = Inter({ subsets: ["latin"] });
export const metadata = {
title: "Exercice",
description: "Exercice d'application en nextJS ",
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<head>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-e6dcd811-4eb2-4f3d-88fe-14d8efffcfe1: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-e6dcd811-4eb2-4f3d-88fe-14d8efffcfe1: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"e6dcd811-4eb2-4f3d-88fe-14d8efffcfe1","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body className={inter.className}>{children}</body>
</html>
);
}
Voilà, on a ajouté le lien dans la balise <head> afin que les icones de notre choix soient affichables, et je suppose que vous savez déjà comment le faire.
Tout cela nous donne un visuel comme ceci :
Le formulaire et les icônes s’affichent correctement. La prochaine étape consistera à appliquer des styles CSS pour mettre en forme le formulaire. Nous aborderons cette partie dans la section suivante.
Devenez expert en développement web dynamique avec NextJS et créez des applications performantes.
Styliser le formulaire Next.js avec du CSS
Passons maintenant à la mise à page de notre formulaire. Pour le faire, on va se rendre dans le fichier page.module.css
.div{
width: 75%;
margin: auto;
background-color:#ecf0f1;
padding: 20px;
margin-top: 15px;
display: flex;
flex-direction: column;
align-items:center;
}
.div h3,.div h4{
color:#ce392b;
margin-bottom: 10px;
display: flex;
align-items:center;
}
.div h3 span,.div h4 span{
color:#e74c3c;
margin-right:9px ;
}
.div h4{
margin-top: 15px;
border-top: 1px dashed #ccc;
padding-top: 4px;
}
.div input {
padding: 12px;
border: 1px solid #ccc;
outline: none;
border-radius:7px;
margin: 5px;
}
.div input::placeholder{
color:#aaa;
}
.div input[type="submit"]{
text-transform: capitalize;
letter-spacing: 1px;
font-size: 0.8rem;
font-weight: 700;
color:#777;
cursor: pointer;
}
.div input[type="submit"]:hover{
color:#000;
}
Voici les propriétés CSS que nous avons appliquées à notre formulaire Next.js pour le rendre attrayant, ce qui nous donne un visuel comme suit :
Maintenant que notre formulaire est bien établi, notre prochaine étape consiste à créer une nouvelle tâche elle-même. Voyons comment procéder dans la section suivante.
Créer et ajouter une nouvelle tâche avec Next.js
Il est temps de créer une nouvelle tâche maintenant. Vous vous demandez peut-être comment faire cela. Eh bien, pas de panique, nous sommes ici pour apprendre. Donc, commençons par déclarer un état pour la nouvelle tâche dans notre fichier app/page.js, puis ajoutons les attributs value et onChange dans notre input. Examinons-les maintenant dans le code ci-dessous :
'use client'
import { useState } from "react";
import styles from "./page.module.css";
export default function Home() {
const [newTask,setNewTask] = useState('')
return (
<div className={styles.div}>
<h3><span className="material-symbols-outlined">add</span>
Tache</h3>
<div>
<input
type="text"
name="tache"
id="tache"
value={newTask}
onChange={(e)=>setNewTask(e.target.value)}
placeholder="Ajoutre tache"/>
<input
type = "submit"
value = "Valider"
/>
</div>
<h4><span className="material-symbols-outlined">task</span>
Liste des taches</h4>
</div>
);
}
Comme vous pouvez le constater, nous avons cette ligne de code que vous maîtrisez déjà :
const [newTask,setNewTask] = useState('')
Cela consiste à déclarer un état (useState) pour la nouvelle tâche, ainsi que les deux attributs value et onChange qui nous permettront de récupérer la valeur de l’input et d’écrire dans le champ input.
Ainsi, nous pouvons désormais créer une nouvelle tâche. Vous pouvez vérifier le résultat visuel ci-dessous :
Nous arrivons à créer une nouvelle tâche à travers notre formulaire Next.js. Maintenant, nous allons tenter d’afficher les tâches créées dans notre application quand l’utilisateur clique sur le boutton valider. Implémentons cela maintenant et vous pouvez voir le résultat ci-dessous.
Dans le fichier app/page.js
'use client'
import { useState } from "react";
import styles from "./page.module.css";
export default function Home() {
const [newTask,setNewTask] = useState('')
//etat pour ajouter la liste des taches
const [tasks,setTasks]= useState([])
let addTask = ()=>{
if(newTask !== ''){
setTasks([...tasks,newTask]);
setNewTask('');
}
}
return (
<div className={styles.div}>
<h3><span className="material-symbols-outlined">add</span>
Tache</h3>
<div>
<input
type="text"
name="tache"
id="tache"
value={newTask}
onChange={(e)=>setNewTask(e.target.value)}
placeholder="Ajoutre tache"/>
<input
type = "submit"
value = "Valider"
onClick={addTask}
/>
</div>
<h4><span className="material-symbols-outlined">task</span>
Liste des taches</h4>
<ul>
{
tasks.map((tache,index)=>(
<li key={index}>{tache}</li>
))
}
</ul>
</div>
);
}
Premièrement , nous avons déclaré un état pour avoir une variable getter pour stocker les taches créées et validées à partir de cette ligne de code :
const [tasks,setTasks]= useState([])
Ensuite, on a cette ligne de code aussi :
let addTask = ()=>{
if(newTask !== ''){
setTasks([...tasks,newTask]);
setNewTask('');
}
}
Effectivement, cela implique de conditionner le champ d’entrée (input) en fonction de s’il est vide ou non. Donc, s’il contient une valeur, celle-ci doit être ajoutée à la liste des tâches, puis le champ doit être vidé après validation de la tâche. Ensuite, la fonction addTask est appelée lorsque l’utilisateur clique sur le bouton « Valider« , et enfin, nous allons utiliser map pour la liste des tâches pour les afficher dans notre application.
En laçant notre application, nous allons avoir un resultat comme ceci :
Bah oui, on a bien créé et afficher nos taches, parfait.
Supprimer une tâche dans un formulaire Next.js
Pour notre dernière touche à cet exercice, nous avons réussi à afficher nos tâches précédentes. Cependant, envisageons le scénario où vous faites une faute en tapant une tâche que vous ne souhaitez pas afficher, ou vous avez fini la tâche et souhaitez la supprimer, mais actuellement nous n’avons pas cette fonctionnalité. C’est la raison de cette étape. Nous allons ajouter une icône à chaque tâche, et en cliquant dessus, la tâche sera supprimée.
Pour faire cela, nous allons ajouter l’icône et une fonction pour supprimer une tache. Implémentons la fonction dans le app/page.js maintenant :
'use client'
import { useState } from "react";
import styles from "./page.module.css";
export default function Home() {
const [newTask,setNewTask] = useState('')
//etat pour ajouter la liste des taches
const [tasks,setTasks]= useState([])
let addTask = ()=>{
if(newTask !== ''){
setTasks([...tasks,newTask]);
setNewTask('');
}
}
let deleteTask = (index)=>{
let updateTask = [...tasks];
updateTask.splice(index,1);
setTasks(updateTask);
}
return (
<div className={styles.div}>
<h3><span className="material-symbols-outlined">add</span>
Tache</h3>
<div>
<input
type="text"
name="tache"
id="tache"
value={newTask}
onChange={(e)=>setNewTask(e.target.value)}
placeholder="Ajoutre tache"/>
<input
type = "submit"
value = "Valider"
onClick={addTask}
/>
</div>
<h4><span className="material-symbols-outlined">task</span>
Liste des taches</h4>
<ul>
{
tasks.map((tache,index)=>(
<li key={index}>{tache}
<button
className={styles.delete}
onClick={()=>{deleteTask(index)}}
>
<span className="material-symbols-outlined">delete
</span>
</button>
</li>
))
}
</ul>
</div>
);
}
On a cet extrait de code comme modification dans le fichier :
let deleteTask = (index)=>{
let updateTask = [...tasks];
updateTask.splice(index,1);
setTasks(updateTask);
}
Cette fonction prend l’index de la tâche à supprimer en paramètre. Ensuite, elle crée une copie de la liste de tâches dans une variable nommée updateTask. L’opération splice() est alors appliquée à cette copie pour retirer l’élément à l’index spécifié. Enfin, la liste de tâches est mise à jour en utilisant le setter setTasks.
L’appel à cette fonction est également inclus dans l’extrait de code ci-dessous, en tant que modification que nous avons apportée.
<ul>
{
tasks.map((tache,index)=>(
<li key={index}>{tache}
<button
className={styles.delete}
onClick={()=>{deleteTask(index)}}
>
<span className="material-symbols-outlined">delete
</span>
</button>
</li>
))
}
</ul>
Effectivement, comme vous pouvez le constater, une icône a été importée et la fonction deleteTask est appelée lorsque l’utilisateur clique sur cette icône.
Voilà la modification au niveau de notre composant mais pour mettre une mis en forme de notre icone, nous ajoutons aussi des propriétés css pour la classe delete de l’icône. Vous pouvez l’examiner comme ceci dans le fichier : app/page.module.css
.delete{
background : none;
border:none;
color:#777;
cursor:pointer;
transition:0.6s;
}
.delete:hover{
color:#000;
}
.delete span{
font-size:1rem;
}
Ces propriétés sont simplement la base, mais étant donné que vous maîtrisez déjà CSS, vous pouvez choisir les propriétés que vous préférez. En lançant l’application, vous obtiendrez un résultat similaire à celui-ci, et en même temps, vous pourrez également supprimer des tâches.
Voilà les tâches ajoutées, et puis si vous avez fini la lessive par exemple, vous pouvez la supprimer parmi la liste de tâche en cliquant juste sur l’icône.
Elle ne s’affiche plus .C’est génial non, on a terminé notre exercice avec succès.
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 guide, vous avez appris à créer un formulaire Next.js complet, de l’initialisation du projet à la gestion des tâches. Nous avons vu comment structurer le formulaire avec JSX, appliquer des styles CSS pour une meilleure présentation, et ajouter des fonctionnalités pour gérer les tâches.
Ce formulaire Next.js vous permet non seulement d’améliorer l’interactivité de votre application, mais aussi de fournir une expérience utilisateur fluide et efficace. Continuez à explorer les capacités de Next.js pour développer des solutions encore plus robustes et innovantes . Et par la suite le volet suivant va traiter la maîtrise de UseEffect en Next.js
