Comment utiliser @next/font pour optimiser les polices dans Next.js

Les polices ralentissent-elles les performances de votre site ? Optimisez le temps de chargement des polices de votre application en utilisant ce package.

Vous pouvez utiliser des polices personnalisées pour rendre votre application Next.js plus attrayante visuellement. L'utilisation de polices personnalisées peut améliorer considérablement l'apparence de votre site Web, mais elle peut également ralentir les performances de votre site si elle n'est pas optimisée correctement. Le@suivant/policepackage est une solution à ce problème.

Le package @next/font fournit un moyen simple et efficace d'optimiser le chargement des polices dans Next.js, en améliorant le temps de chargement des pages et les performances globales. Cet article fournit des informations sur l'utilisation de @next/font dans votre projet Next.js.

Vous pouvez installer le@suivant/policepackage en exécutant la commande suivante dans votre terminal :

Si vous utilisez yarn, vous pouvez installer le package en exécutant cette commande :

Le@suivant/police package optimise l'utilisation des polices Google. Le@suivant/policeauto-héberge automatiquement les polices Google sur le serveur Next.js afin qu'aucune demande ne soit envoyée à Google pour obtenir les polices.

Pour utiliser une police Google dans votre application, vous allez importer la police en tant que fonction depuis@suivant/font/googledans le_app.jsdossier dans lepagesannuaire:

Dans le bloc de code ci-dessus, vous avez créé une police variable à l'aide de larobot fonction de police. Lesous-ensemble la propriété substitue la police aux seuls caractères latins ; si vous utilisez une autre langue, vous pouvez sous-définir la police dans cette langue.

Vous pouvez également spécifier le poids de la police ainsi que le style de police lors de la définition de la police :

Vous spécifiez plusieurs poids de police et styles de police à l'aide de tableaux.

Par exemple:

Ensuite, vous emballerez vos composants dans unprincipalbalisez et transmettez la police en tant que classe auprincipalétiqueter:

Le rendu de votre application avec le bloc de code ci-dessus appliquera la police à l'ensemble de votre application. Alternativement, vous pouvez appliquer la police à une seule page. Pour ce faire, vous ajoutez la police à une page spécifique.

Ainsi:

Le@suivant/police package optimise également l'utilisation des polices locales. La technique d'optimisation des polices locales par la@suivant/policepackage est assez similaire à l'optimisation des polices Google, avec des différences subtiles.

Pour optimiser les polices locales, utilisez lepolice localefonction fournie par le@suivant/police emballer. Vous importez lepolice localefonction de@suivant/police/localpuis définissez votre police variable avant d'utiliser la police dans votre application Next.js.

Ainsi:

Vous définissez la police variablemaPoliceen utilisant lepolice locale fonction. Lepolice locale La fonction prend un objet comme argument. L'objet a une seule propriété,src, qui est défini sur le chemin d'accès au fichier de police dans leWOFF2format"./ma-police.woff2".

Vous pouvez utiliser plusieurs fichiers de polices pour une même famille de polices. Pour ce faire, vous définissez lesrcpropriété à un tableau contenant des objets des différentes polices et leurs propriétés.

Par exemple:

Pour utiliser le@suivant/police package avec Tailwind CSS, vous devez utiliser des variables CSS. Pour ce faire, vous allez définir votre police à l'aide de Google ou des polices locales, puis charger votre police avec l'option variable pour spécifier le nom de la variable CSS.

Par exemple:

Dans le bloc de code ci-dessus, vous avez créé la police,Inter,et définissez la variable sur--font-inter . Lenom du coursde l'élément principal est alors défini sur la variable de police etfont-sans . Leinter.variablela classe appliqueraInterpolice à la page, et lafont-sansclass appliquera la police sans-serif par défaut.

Ensuite, vous ajoutez la variable CSS au fichier de configuration tailwindtailwind.config.cjs:

Vous pouvez maintenant appliquer la police dans votre application en utilisant lefont-sansclasse.

Le package @next/font est un moyen simple et efficace d'optimiser le chargement des polices dans Next.js. Ce package garantit que vos polices personnalisées sont chargées efficacement, améliorant ainsi les performances et l'expérience utilisateur de votre site Web. Cet article fournit des informations sur la configuration du package @next/font et son utilisation dans votre application Next.js. Vous pouvez encore améliorer les performances de votre site en optimisant les images.

Noble Okafor est un ingénieur logiciel qualifié avec plus de 3 ans d'expérience dans le domaine de la programmation. Il est passionné par la création de solutions logicielles JavaScript, natives et multiplateformes mobiles et Web optimisées. Il s'efforce de documenter ses connaissances et ses leçons à travers ses articles techniques avec plus d'un an d'expérience dans l'écriture. L'objectif principal de ces articles est de simplifier les complexités autour des sujets de génie logiciel.