Personnaliser la police d’un projet Next.js peut être complexe sans une méthode claire, limitant souvent le design à des choix par défaut.
Une mauvaise personnalisation des polices peut nuire à l’identité visuelle et à l’expérience utilisateur, affectant la perception et l’engagement.
Cet article présente une approche pratique pour changer et ajuster les polices dans Next.js avec Google Fonts, vous permettant d’améliorer le style visuel et l’impact de votre projet.
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 :
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 :
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 ;
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.
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 :
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 :
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
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 :
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.
Devenez expert en développement web dynamique avec NextJS et créez des applications performantes.
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 :
Waouh, notre navigation est maintenant parfaitement mise en forme.
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 :
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.
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, 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.
