Dans Next.js, les components (composants) sont des éléments de base indépendants et réutilisables qui servent à construire des interfaces utilisateurs. Chaque component encapsule sa propre structure, son apparence et son comportement, rendant le code des pages principals plus lisible et plus facile à maintenir.
L'un des principaux avantages des composants est la capacité de pouvoir les réutiliser. Nous pouvons créer un composant une fois et le réutiliser sur plusieurs pages de notre application. Cela permet non seulement de gagner du temps, mais assure également une cohérence dans toute l'application.
Création d'un composant
Pour créer un composant, nous devons d'abord créer un fichier avec une extension .tsx dans le répertoire des composants de notre projet. Par exemple, disons que nous voulons créer un composant pour une barre de navigation. Nous pouvons créer un fichier nommé navbar.tsx dans le répertoire des composants.
Voici à quoi ressemblerait le code pour un composant d'une barre de navigation:
Par la suite, voici à quoi ressemblerait le code pour un composant d'un bas de page:
Maintenant que nous avons créé le composant bare de navigation (navbar) et le bas de page (Footer), nous pouvons l'utiliser dans toute les page de notre application. Par exemple, disons que nous voulons utiliser ces composants dans notre page d'accueil. Nous pouvons donc les importer dans notre fichier index.tsx et l'utiliser de cette manière :
Cela donnera donc le résultat suivant lors de l'exécution de notre application web:
Source
https://nextjs.org/learn/react-foundations/building-ui-with-components#components
https://javascript.plainenglish.io/working-with-components-and-layouts-in-next-js-3a13ce51d03b
Commentaires2
L'article explique de…
L'article explique de manière claire l'importance des composants dans Next.js. Il met en lumière leur capacité à simplifier le code, favorisant ainsi une réutilisation efficace, avec des exemples concrets tels qu'une barre de navigation et un bas de page. Cette approche garantit non seulement une gestion plus fluide du code mais aussi une uniformité à travers l'ensemble de l'application. Ceci est un guide très utile pour les développeurs Next.js.
Les composants personnalisés
Bonjour,
j'ai trouvé ton article très intéressant, il met en avant un guide pour l'utilisation des composants. Je me demandais si, comme React, Next,js offre la possibilité aux développeurs de personnaliser les composants.