Créer un composant Next.js

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

Dans notre article précédent, nous avons exploré l’intégration d’une API météo dans une application Next.js. Poursuivant sur cette lancée, nous allons maintenant nous concentrer sur un autre aspect crucial du développement avec Next.js : la création et l’utilisation de composants. Cet article vous guidera à travers les différentes étapes pour créer et utiliser des composants dans Next.js, en mettant l’accent sur l’importance des props pour transmettre des données dynamiques. Que vous soyez débutant ou développeur expérimenté, vous découvrirez comment structurer efficacement vos composants enfants et parents, appliquer des styles CSS et gérer des tableaux d’articles. Suivez ce guide pour maîtriser les bases et les techniques avancées des composants Next.js.

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 :

Résultat visuel Articles dans une application Next.js, affichant le texte et le style par défaut.

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.

Composant Articles avec CSS appliqué , montrant les styles personnalisés pour l'affichage.

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 :

Voiture affiché , montrant du texte avec des styles spécifiques pour une page dédiée.

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

Composant Article intégré dans le composant Voiture dans une application Next.js, affichant les deux ensemble.

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.

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>
)
}
				
			

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

Et cela nous donne de resultat comme ceci dans notre navigateur :

Affichage principal de la transmission des props dans un composant Next.js, montrant le texte reçu du parent.

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>
)
}
				
			
Exemple de props

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 id="propstitre" class="rb-heading-index-7">{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.

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.

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 :

Affichage d'un tableau d'articles dans une application Next.js, montrant plusieurs articles avec des props.

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.

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.

É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.