Créer des liens en Next.js

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

Dans notre précédent article, nous avons abordé un tutoriel Next.js détaillé. Aujourd’hui, nous allons approfondir en explorant comment créer et gérer des liens Next.js pour améliorer la navigation et l’expérience utilisateur de votre application web. De la création de nouvelles pages à l’ajout de composants, en passant par la mise en place d’une navigation fluide et l’ajout de liens internes et externes, vous découvrirez toutes les étapes nécessaires pour optimiser votre projet Next.js. Suivez ce guide détaillé pour maîtriser les fondamentaux des liens Next.js et offrir une expérience de navigation intuitive et efficace à vos utilisateurs.

Liens Next.js : Créer une Nouvelle Page avec Next.js

Bienvenue sur cette partie dédiée sur la création de lien en nextJS. Dans cette partie, nous plongerons dans l’art de la navigation dynamique et fluide au sein de vos applications web. Les liens sont les fondations de l’expérience utilisateur, et avec Next.js, nous allons explorer comment créer des liens efficaces et élégants pour connecter vos pages et offrir une expérience de navigation intuitive à vos utilisateurs. Donc, sans plus tarder, nous allons commencer par la création de nouvelle page dans notre projet. Pour ce faire, on va créer un dossier appelé about et y mettre notre nouvel composant pour notre nouvelle page. About /page.js

				
					export default function About(){
return(
< h2>Je suis un apprenti  nextjs< /h2>
)
}
				
			

Voilà, j’ai créé un composant About. On va tester de l’afficher dans notre navigateur sans l’importer dans le fichier app/page.js. Mais avant cela, débarrassez toutes les imports et l’appel des composants dans le fichier page.js . Vous aurez juste de code comme ceci : app/page.js

				
					import styles from "./page.module.css";
export default function Home() {
return (
<>
<div className={`${styles.home} bordure`}>
<h1>Bonjour</h1>
<p>Lorem ipsum.</p>
</div>
</>
);
}
				
			

En lançant votre projet, vous aurez quelque chose comme cela :

Capture d'écran montrant le lancement du projet Next.js.

Jusqu’à présent, tout semble fonctionner correctement. Cependant, malgré cela, pourquoi notre nouveau composant About n’apparaît-il pas ? Tout simplement parce que nous ne l’avons pas encore importé dans notre application et qu’aucun lien ne lui est associé. Donc, sans lui associer un lien , nous allons tenter de l’afficher ; pour ce faire vous ajouter juste une slache puis le nom du composant dans la barre de recherche comme ceci : http://localhost:3000/about

Et puis , cela va nous donner le contenu de notre composant :

 

Ajout d'un composant "About" dans un projet Next.js.

Voila, il affiche bien le contenu de notre composant.

Ensuite, on va encore ajouter un autre nouveau composant pour une autre page.

App/contact/page.js

				
					export default function Contact(){
return(
< h2>Voulez vous me contacter< /h2>
)
}
				
			

Et pour l’afficher, vous faites la même chose comme précédemment et vous aurez le contenu du composant : http://localhost:3000/contact

Et cela nous affiche bien ;

Affichage du composant "About" dans le navigateur.

Nous avons réussi à afficher nos composants sans les importer ni leur associer de liens. Cependant, cette approche n’est pas pratique en programmation, et aucun développeur sérieux ne l’adopte. Donc, nous allons appendre dans la partie suivant comment mettre une navigation pour naviguer facilement dans notre page.

Liens Next.js : Mettre en Place une Zone de Navigation Next.js

La navigation est l’un des éléments clés de toute application web, permettant aux utilisateurs de passer d’une page à l’autre de manière fluide et intuitive. Donc, maintenant nous allons l’implémenter en nextJS. Mettons en place d’abord le composant pour notre navigation. Pour le faire, créons le fichier nav.js dans le dossier component.component/nav.js

				
					export default function Nav(){
return(
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
)
}
				
			

Ensuite, il faut l’importer dans le fichier app/page.js afin que nous puissions appeler le composant et afficher son contenu.

				
					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>Lorem ipsum.</p>
</div>
</>
);
}
				
			

En lançant notre projet, il va bien nous afficher le nouveau contenu de notre projet avec notre navigation.

Démarrage du projet Next.js avec les composants en place.

Puis, si vous voulez que le contenu de notre navigation s’affiche dans la page de contact et about, il faut juste y importer notre composant navigation. Examinons comme le faire maintenant : app/about/page.js

				
					import Nav from "../component/nav"
export default function About(){
return(
<>
<Nav/>
< h2>Je suis un apprenti  nextjs< /h2>
</>
)
}
				
			

Et maintenant, voyons le resultat de notre code en démarrant le projet :

Vérification de l'affichage du contenu avec le composant navigation.

Il est possible que vous souhaitiez placer la navigation en bas du texte, et oui, c’est tout à fait réalisable grâce aux composants. Il vous suffit simplement de déplacer le composant dans notre code pour changer son emplacement.

Pour la page de contact, il vous suffit de suivre la même procédure, et tout fonctionnera comme prévu par la suite. app/contact/page.js

				
					import Nav from "../component/nav"
export default function Contact(){
return(
<>
<Nav/>
< h2>Voulez vous me contacter< /h2>
</>
)
}
				
			

Cela nous donnera un résultat comme ceci :

Affichage de la page de contact avec le composant navigation.

Parfait, on a mis en place notre navigation avec succès.

Créer des liens internes et externes avec Next.js

Maintenant, nous allons rendre notre navigation cliquable et répondre en fonction de nos besoins. Voyons les modifications au niveau de  notre composant Nav alors.  App/component/nav.js

				
					import Link from "next/link"
export default function Nav(){
return(
<nav>
<ul>
<li><Link href="/" >Home</Link></li>
<li><Link href="/about">About</Link></li>
<li><Link href="/contact">Contact</Link></li>
</ul>
</nav>
)
}
				
			

Nous avons ajouté la balise Link avec ses propriétés href pour notre lien. Ces notions sont simples, ce sont des concepts classiques pour les liens que nous avons déjà vus, même en React.

N’oublie pas de démarrer le projet si tout fonctionne bien maintenant

Démarrage du projet Next.js avec les composants en place.

Voilà, tout fonctionne bien jusque maintenant. Donc, si vous voulez afficher le contenu du composant de votre choix, vous cliquez juste sur ce composant. Vous pouvez vérifier :

Vérification de l'affichage du contenu avec le composant navigation.

Excellent, nous avons maintenant cliqué sur le composant ‘contact’ dans la page contact, et son contenu s’affiche correctement. Nous avons donc correctement mis en place nos liens pour la navigation. Cependant, comme vous pouvez le constater, le contenu de notre composant nav n’est pas bien mis en forme comme une navigation. Dans la partie suivante, nous allons lui appliquer des propriétés CSS pour le mettre en forme.

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

Liens Next.js : Mettre en Forme la Zone de Navigation avec CSS

Lorsque vous consultez une page web, vous constatez que la navigation est généralement bien représentée et affiche son contenu dans une seule ligne. Cependant, actuellement, notre navigation se présente simplement comme une liste. Vous vous demandez probablement comment la modifier. En réalité, il suffit simplement d’appliquer quelques règles CSS pour la transformer. Implémentons-la maintenant. Donc créons le fichier css dans le dossier component : app/component/nav.module.css

				
					#navigation{
background-color:white;
margin-bottom:25px ;
padding: 15px;
}
#navigation ul{
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-around;
}
#navigation a{
text-decoration: none;
color: blue;
font-weight: 700;
}
				
			

Nous avons simplement ajouté les propriétés CSS nécessaires pour mettre en forme notre élément, mais comme vous avez déjà une bonne maîtrise de ce sujet, vous pouvez y ajouter autant d’éléments de style que vous le souhaitez

Apres cela si vous démarrer votre projet, notre page devient comme ceci :

 

Démarrage du projet Next.js après l'ajout de la navigation.

Waouh, notre navigation est maintenant parfaitement mise en forme.

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.

Liens Next.js : Créer un Lien Externe en Next.js

Jusqu’à présent, nous avons uniquement abordé les liens internes. Cependant, il arrive parfois que nous ayons besoin d’ajouter un lien externe dans un projet. Comment pouvons-nous procéder avec Next.js ? Découvrons ensemble la marche à suivre dès maintenant.

Par exemple, nous allons mettre un lien pour diriger vers le page de google. Pour le faire, examinons la modification dans le fichier app/page.js

				
					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>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 balise <a> crée un lien hypertexte vers une autre page web. L’attribut href spécifie l’URL vers laquelle le lien pointe, dans ce cas, il pointe vers https://www.google.fr. L’attribut target= »_blank » spécifie que le lien doit être ouvert dans une nouvelle fenêtre ou un nouvel onglet du navigateur.

En lançant votre projet, vous constaterez le contenu du navigateur comme ceci :

 

Affichage du contenu dans le navigateur après les modifications.

Excellent, nous avons réussi à conclure ce chapitre avec succès. Bref, vous maitriser comment mettre en place une zone de navigation et les liens dans un page web grâce à cette partie.

Conclusion

En conclusion, maîtriser les liens Next.js est essentiel pour offrir une navigation fluide et intuitive dans vos applications web. Grâce aux étapes détaillées dans cet article, vous savez maintenant comment créer de nouvelles pages, ajouter et afficher des composants, mettre en place une navigation efficace, et gérer les liens internes et externes. En appliquant ces techniques, vous améliorerez non seulement l’expérience utilisateur, mais aussi le référencement de votre site. Continuez à explorer et à expérimenter avec Next.js pour tirer le meilleur parti de ses fonctionnalités avancées. Et par la suite nous allons traiter le volet suivant de la personnalisation de police 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.