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

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/police package 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, améliorant ainsi 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.

Installation du paquet

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

npm install @next/police

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

fil ajouter @next/police

Utilisation de @next/font pour optimiser les polices Google

Le @suivant/police package optimise l'utilisation des polices Google. Le @suivant/police auto-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/google dans le _app.js dossier dans le pages annuaire:

importer { Roboto } depuis'@suivant/font/google'
constante roboto = Roboto({ sous-ensembles: ['Latin'] })
exporterdéfautfonctionMonApp({ Composant, pageProps }) {
retour (

 )
}

Dans le bloc de code ci-dessus, vous avez créé une police variable à l'aide de la Robot fonction de police. Le sous-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 :

constante roboto = roboto( 
 {
 sous-ensembles: ['Latin'],
 lester: '400',
 style: 'italique'
 }
)

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

Par exemple:

constante roboto = roboto( 
 {
 sous-ensembles: ['Latin'],
 lester: ['400', '500', '700'],
 style: ['italique', 'normal']
 }
)

Ensuite, vous emballerez vos composants dans un principal balisez et transmettez la police en tant que classe au principal étiqueter:

importer { Roboto } depuis'@suivant/font/google'
constante roboto = roboto( 
 {
 sous-ensembles: ['Latin'],
 lester: ['400', '500', '600'],
 style: ['italique', 'normal']
 }
)
exporterdéfautfonctionMonApp({ Composant, pageProps }) {
retour (


 </main>
 )
}

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:

importer { Roboto } depuis'@suivant/font/google'
constante roboto = roboto( 
 {
 sous-ensembles: ['Latin'],
 lester: ['400', '500', '600'],
 style: ['italique', 'normal']
 }
)
exporterdéfautfonctionMaison() {
retour (


Bonjour là-bas !!!</p>
 </div>
 )
}

Utilisation de @next/font pour optimiser les polices locales

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

Pour optimiser les polices locales, utilisez le police locale fonction fournie par le @suivant/police emballer. Vous importez le police locale fonction de @suivant/police/local puis définissez votre police variable avant en utilisant la police dans votre application Next.js.

Ainsi:

importer police locale depuis'@suivant/police/local'
constante maPolice = policelocale({ src: './ma-police.woff2' })
exporterdéfautfonctionMonApp({ Composant, pageProps }) {
retour (


 </main>
 )
}

Vous définissez la police variable maPolice en utilisant le police locale fonction. Le police 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 le WOFF2 format "./ma-police.woff2".

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

Par exemple:

constante maPolice = policelocale( 
 {
 source: [
 {
 chemin: './Roboto-Regular.woff2',
 lester: '400',
 style: 'normal',
 },
 {
 chemin: './Roboto-Italique.woff2',
 lester: '400',
 style: 'italique',
 },
 {
 chemin: './Roboto-Bold.woff2',
 lester: '700',
 style: 'normal',
 },
 {
 chemin: './Roboto-BoldItalic.woff2',
 lester: '700',
 style: 'italique',
 },
 ]
 }
)

Utilisation de @next/font avec Tailwind CSS

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:

importer { Inter } depuis'@suivant/font/google'
constante entre = entre({
 sous-ensembles: ['Latin'],
 variable: '--font-inter',
})
exporterdéfautfonctionMonApp({ Composant, pageProps }) {
retour (
`${inter.variable} police-sans`}>

 </main>
 )
}

Dans le bloc de code ci-dessus, vous avez créé la police, Inter, et définissez la variable sur --font-inter. Le nom du cours de l'élément principal est alors défini sur la variable de police et police-sans. Le inter.variable la classe appliquera Inter police à la page, et la police-sans class appliquera la police sans-serif par défaut.

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

/** @taper {import('tailwindcss').Config}*/
module.exports = {
 contenu: ["./index.html",
"./src/**/*.{js, ts, jsx, tsx}",],
 thème: {
 étendre: {
 famille de polices: {
 sans: ['var(--font-inter)'],
 },
 },
 },
 plugins: [],
}

Vous pouvez maintenant appliquer la police dans votre application en utilisant le police-sans classe.

Optimisation des polices avec @next/font

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.