Cum să utilizați @next/font pentru a optimiza fonturile în Next.js

Poate doriți să utilizați fonturi personalizate pentru a face aplicația dvs. Next.js mai atractivă din punct de vedere vizual. Folosirea fonturilor personalizate poate îmbunătăți în mod semnificativ aspectul site-ului dvs., dar poate încetini și performanța site-ului dacă nu este optimizat corespunzător. The @next/font pachetul este o soluție la această problemă.

Pachetul @next/font oferă o modalitate simplă și eficientă de a optimiza încărcarea fonturilor în Next.js, îmbunătățind timpul de încărcare a paginii și performanța generală. Acest articol oferă informații despre cum să utilizați @next/font în proiectul dvs. Next.js.

Instalarea pachetului

Puteți instala @next/font pachet rulând următoarea comandă în terminalul dvs.:

npm install @next/font

Dacă utilizați yarn, puteți instala pachetul rulând această comandă:

yarn adauga @next/font

Utilizarea @next/font pentru a optimiza fonturile Google

The @next/font pachetul optimizează utilizarea fonturilor Google. The @next/font găzduiește automat fonturile Google pe serverul Next.js, astfel încât să nu fie trimisă nicio solicitare către Google pentru a obține fonturile.

Pentru a utiliza un font Google în aplicația dvs., veți importa fontul ca funcție din @next/font/google în _app.js dosar în pagini director:

import { Roboto } din„@next/font/google”
const roboto = Roboto({ subseturi: ['latin'] })
exportMod implicitfuncţieMyApp({ Componentă, pageProps }) {
întoarcere (

 )
}

În blocul de cod de mai sus, ați creat un font variabil folosind Roboto funcția fontului. The subset proprietatea subsetează fontul doar la caracterele latine; dacă utilizați o altă limbă, puteți subseta fontul la acea limbă.

De asemenea, puteți specifica greutatea fontului împreună cu stilul fontului atunci când definiți fontul:

const roboto = Roboto( 
 {
 subseturi: ['latin'],
 greutate: '400',
 stil: 'cursiv'
 }
)

Specificați mai multe greutăți de font și stiluri de font folosind matrice.

De exemplu:

const roboto = Roboto( 
 {
 subseturi: ['latin'],
 greutate: ['400', '500', '700'],
 stil: ['cursiv', 'normal']
 }
)

În continuare, vă veți împacheta componentele într-un principal etichetați și transmiteți fontul ca clasă către principal etichetă:

import { Roboto } din„@next/font/google”
const roboto = Roboto( 
 {
 subseturi: ['latin'],
 greutate: ['400', '500', '600'],
 stil: ['cursiv', 'normal']
 }
)
exportMod implicitfuncţieMyApp({ Componentă, pageProps }) {
întoarcere (


 </main>
 )
}

Redarea aplicației dvs. cu blocul de cod de mai sus va aplica fontul întregii aplicații. Alternativ, puteți aplica fontul pe o singură pagină. Pentru a face acest lucru, adăugați fontul la o anumită pagină.

Ca astfel:

import { Roboto } din„@next/font/google”
const roboto = Roboto( 
 {
 subseturi: ['latin'],
 greutate: ['400', '500', '600'],
 stil: ['cursiv', 'normal']
 }
)
exportMod implicitfuncţieAcasă() {
întoarcere (


Buna ziua!!!</p>
 </div>
 )
}

Folosind @next/font pentru a optimiza fonturile locale

The @next/font pachetul optimizează, de asemenea, utilizarea fonturilor locale. Tehnica de optimizare a fonturilor locale prin intermediul @next/font pachetul este destul de asemănător cu optimizarea fonturilor Google, cu diferențe subtile.

Pentru a optimiza fonturile locale, utilizați localFont funcția oferită de @next/font pachet. Tu importi localFont functia de la @next/font/local și apoi definiți fontul variabil înainte folosind fontul din aplicația dvs. Next.js.

Ca astfel:

import localFont din„@next/font/local”
const myFont = font local({ src: „./my-font.woff2” })
exportMod implicitfuncţieMyApp({ Componentă, pageProps }) {
întoarcere (


 </main>
 )
}

Definiți fontul variabil myFont folosind localFont funcţie. The localFont funcția ia un obiect ca argument. Obiectul are o singură proprietate, src, care este setată la calea fișierului de font din fișierul WOFF2 format „./my-font.woff2”.

Puteți utiliza mai multe fișiere de fonturi pentru o singură familie de fonturi. Pentru a face acest lucru, setați src proprietate la o matrice care conține obiecte ale diferitelor fonturi și proprietățile acestora.

De exemplu:

const myFont = font local( 
 {
 src: [
 {
 cale: „./Roboto-Regular.woff2”,
 greutate: '400',
 stil: 'normal',
 },
 {
 cale: „./Roboto-Italic.woff2”,
 greutate: '400',
 stil: 'cursiv',
 },
 {
 cale: „./Roboto-Bold.woff2”,
 greutate: '700',
 stil: 'normal',
 },
 {
 cale: „./Roboto-BoldItalic.woff2”,
 greutate: '700',
 stil: 'cursiv',
 },
 ]
 }
)

Folosind @next/font cu CSS Tailwind

Pentru a utiliza @next/font pachet cu Tailwind CSS, trebuie să utilizați variabile CSS. Pentru a face acest lucru, vă veți defini fontul utilizând fonturi Google sau locale și apoi încărcați fontul cu opțiunea variabilă pentru a specifica numele variabilei CSS.

De exemplu:

import { Inter } din„@next/font/google”
const inter = Inter({
 subseturi: ['latin'],
 variabil: '--font-inter',
})
exportMod implicitfuncţieMyApp({ Componentă, pageProps }) {
întoarcere (
`${inter.variable} font-sans`}>

 </main>
 )
}

În blocul de cod de mai sus, ați creat fontul, inter, și setați variabila la --font-inter. The numele clasei a elementului principal este apoi setată la variabila font și font-sans. The inter.variabilă clasa va aplica inter font pentru pagină și font-sans clasa va aplica fontul implicit sans-serif.

Apoi, adăugați variabila CSS la fișierul de configurare tailwind tailwind.config.cjs:

/** @tip {import('tailwindcss').Config}*/
modul.exports = {
 continut: [„./index.html”,
„./src/**/*.{js, ts, jsx, tsx}”,],
 tema: {
 extinde: {
 familie de fonturi: {
 sans: [„var(--font-inter)”],
 },
 },
 },
 pluginuri: [],
}

Acum puteți aplica fontul în aplicația dvs. folosind font-sans clasă.

Optimizarea fontului cu @next/font

Pachetul @next/font este o modalitate simplă și eficientă de a optimiza încărcarea fonturilor în Next.js. Acest pachet asigură că fonturile dvs. personalizate sunt încărcate eficient, îmbunătățind performanța site-ului dvs. și experiența utilizatorului. Acest articol oferă informații despre cum să configurați pachetul @next/font și să îl utilizați în aplicația dvs. Next.js. Puteți îmbunătăți și mai mult performanța site-ului dvs. prin optimizarea imaginilor.