Personnalisation Next.js : Changer la police du projet
Dans le cadre de votre projet, vous pourriez ressentir le besoin de personnaliser la police Next.js par défaut. Cette sélection de polices participe à l’identité visuelle et au style global de votre projet. Ainsi, nous allons maintenant explorer comment modifier la police du projet avec Next.js. Procédons sur ce sujet maintenant. Quand vous démarrer votre projet , vous voyez la police par défaut comme vous pouvez remarquer ceci :
Si vous examinez les fichiers CSS du projet, vous remarquerez que la police n’a pas encore été appliquée. Ainsi, une question se pose : comment est définie la police par défaut de notre projet ? Bah oui, il n’arrive pas comme ça au hasard car si vous examinez le fichier app/layout.js, vous y trouverez cette ligne de code.
import { Inter } from "next/font/google";
Comme vous voyez, il a bien importé la police Inter depuis google font et c’est ce type de police qui était manipuler pour définir la valeur par défaut de notre projet.
Examinons maintenant comment il a structuré le code pour appliquer ce type de police dans notre projet : app/layout.js
import { Inter } from "next/font/google";
import "./globals.css";
const inter = Inter({ subsets: ["latin"] });
export const metadata = {
title: "Projet NextJS",
description: "Je veux maitriser NextJS",
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body data-rsssl=1 className={inter.className}>{children}<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
);
}
Nous avons cette ligne de code qui est un peu nouveau :
const inter = Inter({ subsets: ["latin"] });
On a déclaré un constant pour stocker la configuration de la police Inter avec des options supplémentaires. Dans ce cas, la police est configurée avec le sous-ensemble latin. Et après, la classe de la police Inter est ajoutée, permettant ainsi l’application de cette police à tout le contenu de l’application.
Personnaliser police Next.js : comment modifier ce type de police si nous voulons la personnaliser ? C’est le sujet principal de cette partie.
Afin de sélectionner la police de votre choix, vous pouvez vous rendre sur le site Google Fonts à l’adresse suivante : https://fonts.google.com. Là, vous aurez accès à une large gamme de polices parmi lesquelles vous pourrez faire votre choix.
Maintenant, essayons de changer la police de notre projet alors. Je vais rendre dans ce site, et je vais choisir la police de type Oswald qui définit la police comme ceci :
Examinons la modification au niveau de notre code maintenant :
import { Oswald } from "next/font/google";
import "./globals.css";
const oswald = Oswald({ subsets: ["latin"] });
export const metadata = {
title: "Projet NextJS",
description: "Je veux maitriser NextJS",
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body data-rsssl=1 className={oswald.className}>{children}</body>
</html>
);
}
Nous avons d’abord importé la police Oswald depuis Google Fonts, puis nous avons déclaré une constante nommée oswald pour stocker sa configuration supplémentaire. Ensuite, nous l’avons ajoutée à la classe du corps (body) de notre page pour l’appliquer à tout le contenu de notre site.
Personnaliser police Next.js : En démarrant notre projet, on verra bien ce qu’il nous affichera.
Parfait, on a changé notre police maintenant, c’est super non.
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
Personnalisation Next.js : Afficher des icônes
Les icônes sont des éléments visuels essentiels qui ajoutent de la convivialité et de la clarté à nos interfaces utilisateur. Plutôt que de simplement afficher du texte, les icônes permettent aux utilisateurs de comprendre rapidement les fonctionnalités d’une application. Dans cette partie, nous allons explorer comment afficher des icônes dans nos applications.
Personnaliser police Next.js : On va encore explorer le site de Google Fonts à l’adresse https://fonts.google.com/icons pour choisir des icônes à intégrer dans notre application. Sur ce site, vous trouverez une variété d’icônes parmi lesquelles vous pourrez sélectionner celles que vous souhaitez afficher dans votre application. Maintenant, passons à la manière de les intégrer dans notre application.
Lorsque vous naviguez sur le site de Google Fonts et que vous trouvez l’icône de votre choix, il vous suffit de cliquer dessus. Le site générera alors le lien correspondant à cette icône. Vous devrez ensuite copier ce code et le placer à l’intérieur d’une balise <head> dans le fichier app/layout.js. Pour illustrer cette explication, je vous propose la capture d’écran ci-dessous.
Voyons maintenant comment en implémenter dans notre code : app/layout.js
import { Oswald } from "next/font/google";
import "./globals.css";
const oswald = Oswald({ subsets: ["latin"] });
export const metadata = {
title: "Projet NextJS",
description: "Je veux maitriser NextJS",
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<head>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-aa94c3b8-612f-40d6-9fc2-fdb3bb6eabb8: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-aa94c3b8-612f-40d6-9fc2-fdb3bb6eabb8: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"aa94c3b8-612f-40d6-9fc2-fdb3bb6eabb8","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body data-rsssl=1 className={oswald.className}>{children}</body>
</html>
);
}
Maintenant que nous avons simplement copié le lien correspondant à l’icône de notre choix, vous remarquerez que rien n’est affiché lorsque vous démarrez le projet. Cela est normal, car nous avons seulement copié le lien sans l’appliquer à notre application.
Personnaliser police Next.js : Pour afficher l’icône, il vous suffit de choisir l’endroit où vous souhaitez l’afficher dans votre application, puis d’implémenter la classe que Google Fonts met à votre disposition juste en dessous du lien de l’icône que vous avez copié précédemment.
Voici une directive pour vous illustrer le texte :
Maintenant que nous disposons d’une classe, nous allons la copier dans une balise spécifique 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><span className="material-symbols-outlined">home
</span></p>
<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>
</>
);
}
Dans ce fichier, nous y trouverons cette ligne :
<p><span className="material-symbols-outlined">home
</span></p>
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.
La ligne qui nous intéresse à présent est celle-ci, car elle nous permet d’afficher l’icône de type « home » dans notre application.
En démarrant notre projet, nous allons trouver l’icône comme ceci :
Cela confirme que tout fonctionne correctement jusqu’à présent. Avant de conclure cette partie, une dernière précision : sur le site de Google Fonts, il est mentionné « class », mais nous devons changer ce nom en « className » car nous travaillons avec Next.js. Sinon, cela ne fonctionnera pas correctement.
Conclusion
En conclusion, la personnalisation de la police dans Next.js est une pratique essentielle pour créer des projets web attrayants et professionnels. En suivant les étapes décrites dans cet article, vous pouvez facilement changer la police par défaut et intégrer des icônes via Google Fonts, ce qui améliore l’esthétique et la fonctionnalité de votre application Next.js. N’hésitez pas à expérimenter avec différentes polices et icônes pour trouver la combinaison parfaite qui correspond à votre vision et aux besoins de vos utilisateurs. Et par la suite nous allons traiter dans le volet suivant les icônes Next.js.
