Gérer des composants dynamiques dans Next.js et transmettre efficacement des données entre eux peut être un véritable casse-tête.
Sans une approche claire, le code devient vite confus, difficile à maintenir, et sujet à des erreurs fréquentes, impactant la performance de l’application.
Cet article vous montre comment créer des composants enfants et parents, envoyer des « props » et gérer des tableaux de données dans Next.js, pour une application performante et facile à gérer.
Créer un composant enfant dans Next.js
Dans cette section, nous allons découvrir comment intégrer des composants dynamiques dans notre application Next.js. Que faire si nous voulons inclure un composant partout dans notre programme, mais avec des données différentes à chaque fois? La clé réside dans l’utilisation des propriétés (props) pour transmettre des données aux composants. Plongeons maintenant dans l’implémentation. Pour commencer, créons un projet Next.js en utilisant la commande que vous connaissez déjà dans le répertoire de votre choix : yarn create next-app my-next-project .
Et par la suite, créons notre premier composant maintenant dans un nouveau dossier appelé component : component/arcticles.js
export default function Articles(){
return(
<div>
< h2>Titre de l'article< /h2>
<p>Paragraphe de l'article</p>
</div>
)
}
Voici notre premier composant, nommé « Articles« , qui renvoie simplement du texte. Pour l’intégrer dans notre application, nous devons l’importer dans le fichier page.js pour pouvoir l’utiliser. Examinons-le avec le code suivants dans page.js.
import Articles from "./component/articles";
export default function Home() {
return (
<section>
<Articles/>
</section>
);
}
Comme vous pouvez le voir, nous avons supprimé le contenu par défaut généré par Next.js. Voici maintenant comment nous avons implémenté notre composant.
Parfait , en lancant notre application , nous aurons un visuel comme ceci dans le navigateur :
Notre composant affiche correctement son contenu. Passons maintenant à l’ajout de styles CSS pour donner du style à notre application.
Commençons d’abord le changement dans le fichier page.module.css :
#section{
margin:auto;
width: 75%;
}
Nous avons retiré les propriétés CSS par défaut, laissant ainsi de la place pour personnaliser notre application. Mais n’oublie pas d’ajouter un identifiant appelé section dans notre fichier page.js pour la balise section :
import Articles from "./component/articles";
import styles from './page.module.css';
export default function Home() {
return (
<section id={styles.section}>
<Articles/>
</section>
);
}
Créons ensuite le fichier articles.module.css dans le dossier component pour définir des styles spécifiques pour notre composant « Articles« . Dans le fichier articles.module.css, nous allons écrire les règles de style suivantes :
.art{
padding: 20px;
background-color:#f3f3f3;
margin: 15px;
border:1px solid #ddd;
border-radius:6px;
}
Une petite précision : comme vous le savez déjà, n’oubliez pas d’importer le module de styles du fichier articles.module.css dans votre composant et de créer la classe art. Vous pouvez voir comment cela est fait dans le code du composant « Articles« .
Component/articles.js :
import styles from './articles.module.css';
export default function Articles(){
return(
<div className = {styles.art}>
< h2>Titre de l'article< /h2>
<p>Paragraphe de l'article</p>
</div>
)
}
Voilà, tout cela nous donne un resultat comme ceci dans notre navigateur.
Parfait, nous avons implémenté notre composant enfant. Continuons maintenant à créer le composant parent dans la section suivante.
Créer un nouveau composant parent dans Next.js
Jusqu’à présent, notre application est accessible à l’adresse URL suivante : http://localhost:3001/ . Cela signifie que nous sommes sur la page d’accueil. Mais que faire si nous voulons afficher des composants des articles spécifiques, comme par exemple des voitures, avec une URL du type : http://localhost:3001/voitures ? Eh bien, c’est l’un des avantages de Next.js : nous allons simplement créer un composant dans un dossier nommé « voitures ».
Pour cela, dans notre projet, nous allons créer un dossier appelé « voitures » pour héberger le composant correspondant. Voitures/page.js
import styles from './page.module.css'
export default function Voiture(){
return(
<div className={styles.voiture}>
<h1>Article parlant de voiture</h1>
</div>
)
}
Voici notre composant « Voiture« , qui renvoie du texte. De plus, nous avons importé son fichier CSS page.module.css qui se trouve dans le même dossier, qui contient des propriétés comme celles-ci :
Voitures/page.modules.css :
.voiture{
margin: auto;
width: 75%;
background-color:brown;
}
.voiture h1{
font-size: 1rem;
text-align: center;
color: aqua;
}
Quand nous allons lancer l’application, Ce composant est accessible dans l’url : http://localhost:3001/voitures et il nous affiche le contenu comme ceci :
Parfait, maintenant comment faire si nous voulons inclure notre composant Article dans le composant voiture. Bah c’est simple, il suffit juste de l’importer dans notre composant Voitures comme ceci :
Voitures/page.js
import Articles from '../component/articles'
import styles from './page.module.css'
export default function Voiture(){
return(
<div className={styles.voiture}>
<h1>Article parlant de voiture</h1>
<Articles/>
</div>
)
}
Après avoir importé et appelé notre composant Articles dans notre composant Voitures , voici le résultat qui s’affiche dans notre navigateur dans l’url : http://localhost:3001/voitures
Super, nous avons bien réussi à atteindre notre objectif. Cependant, le contenu de notre application n’est pas encore disponible. Dans la prochaine section, nous allons utiliser des props pour transmettre nos données à l’application.
Formation Maîtriser les Fondamentaux de NextJS
Devenez expert en développement web dynamique avec NextJS et créez des applications performantes.
Envoyer des props à un composant enfant dans Next.js
Dans cette section, nous allons parler de la manière d’envoyer des données depuis un composant parent vers des composants enfants en utilisant les « props » dans un contexte Next.js.
Les « props » (propriétés) sont des arguments que vous pouvez transmettre à un composant Next.js pour lui fournir des données dynamiques. Cela vous permet de créer des composants réutilisables et flexibles. Pour comprendre comment cela fonctionne, examinons un exemple d’implémentation où un composant parent envoie des « props » à ses enfants.
Voyons comment cela fonctionne dans un exemple concret avec un composant parent et ses composants enfants.
App/page.js
import Articles from "./component/articles";
import styles from './page.module.css';
export default function Home() {
return (
<section id={styles.section}>
<h1>Listes de mes articles</h1>
<Articles
titre="Article numéro 01"
paragraphe = "Paragraphe de l'article 1" />
</section>
);
}
Voilà notre composant parent qui envoie des props au composant enfant. Donc, voyons maintenant comment le composant enfant récupère cela :
App/component/articles.js
import styles from './articles.module.css';
export default function Articles({titre,paragraphe}){
return(
<div className = {styles.art}>
< h2>{titre}< /h2>
<p>{paragraphe}</p>
</div>
)
}
Et cela nous donne de resultat comme ceci dans notre navigateur :
Il affiche bien les props que le composant parent a envoyé.
Ensuite, nous allons faire la même chose pour le composant parent voiture . Donc, examinons maintenant comment il va envoyer ses props au composant enfant :
App/voitures/page.js
import Articles from '../component/articles'
import styles from './page.module.css'
export default function Voiture(){
return(
<div className={styles.voiture}>
<h1>Article parlant de voiture</h1>
<Articles
titre="Article voiture 01"
paragraphe = "Paragraphe d'article voiture 01"/>
</div>
)
}
Ainsi, notre composant parent envoie également des props au composant Articles. Pour récupérer ces props, il suffit simplement d’importer le composant et d’utiliser les valeurs transmises.
App/component/articles.js
import styles from './articles.module.css';
export default function Articles({titre,paragraphe}){
return(
<div className = {styles.art}>
< h2>{titre}< /h2>
<p>{paragraphe}</p>
</div>
)
}
Tout fonctionne parfaitement jusqu’à présent et nous parvenons à manipuler nos props. Nous avons utilisé une méthode appelée déstructuration des props. Cependant, il existe une autre approche qui aboutit au même résultat, comme celle-ci.
App/component/articles.js
import styles from './articles.module.css';
export default function Articles(props){
return(
<div className = {styles.art}>
< h2>{props.titre}</ h2>
<p>{props.paragraphe}</p>
</div>
)
}
Ainsi, vous avez le choix entre ces deux méthodes ; choisissez celle qui vous convient le mieux.
Envoyer un tableau d’articles dans Next.js
Jusqu’à présent, nous avons affiché du contenu pour un seul article. Imaginez maintenant que nous ayons plusieurs articles à afficher, ce qui signifie que nous avons des données d’articles disponibles. Vous avez une idée de la manière de les implémenter ?
Pas de panique, voyons ensemble comment procéder : Même si nous n’avons pas encore de données d’articles, nous pouvons les déclarer avec un useState et utiliser le getter pour stocker nos données. Ensuite, nous pourrons les parcourir et les afficher avec un map. Examinons le code maintenant : app/voiture/page.js
'use client';
import { useState } from 'react';
import Articles from '../component/articles';
import styles from './page.module.css';
export default function Voiture(){
const [article,setArticles] = useState([
{titre: "voiture 1",paragraphe:"Paragraphe de voiture 1"},
{titre: "voiture 2",paragraphe:"Paragraphe de voiture 2"},
{titre: "voiture 3",paragraphe:"Paragraphe de voiture 3"},
{titre: "voiture 4",paragraphe:"Paragraphe de voiture 4"},
])
return(
<div className={styles.voiture}>
<h1>Article parlant de voiture</h1>
{
article.map((art,index)=>{
return(
<Articles
titre={art.titre}
paragraphe = {art.paragraphe}/>
)
})
}
</div>
)
}
Comme vous le savez déjà, nous avons mappé nos articles à partir du getter articles, et le composant Articles affiche le titre et le paragraphe de chaque article. Lorsque nous lançons notre application et accédons à l’URL de la section « voitures« , voici ce que nous obtenons :
Nos articles s’affichent correctement dans notre application. Ainsi, nous avons conclu avec succès cet article sur l’intégration d’un composant dynamique.
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, la création et l’utilisation de composants dans Next.js sont essentielles pour construire des applications web modernes et dynamiques.
En suivant les étapes décrites dans cet article, vous avez appris à créer des composants enfants et parents, à transmettre des données via les props, et à appliquer des styles CSS pour personnaliser vos éléments. L’intégration de tableaux d’articles et la gestion des props vous permettent de rendre vos applications plus flexibles et réactives.
Continuez à explorer les possibilités offertes par les composants Next.js pour optimiser et enrichir vos projets web. Et par la suite nous allons traiter le volet de installation Next.js simplifiée.
