Hvordan bruke @next/font for å optimalisere skrifter i Next.js

Det kan være lurt å bruke egendefinerte fonter for å gjøre Next.js-applikasjonen mer visuelt tiltalende. Bruk av egendefinerte skrifttyper kan forbedre utseendet og følelsen til nettstedet ditt betydelig, men det kan også redusere ytelsen til nettstedet ditt hvis det ikke er optimalisert på riktig måte. De @neste/font pakken er en løsning på dette problemet.

@next/font-pakken gir en enkel og effektiv måte å optimalisere skriftinnlasting i Next.js, og forbedrer sideinnlastingstid og generell ytelse. Denne artikkelen gir informasjon om hvordan du bruker @next/font i Next.js-prosjektet.

Installerer pakken

Du kan installere @neste/font pakke ved å kjøre følgende kommando i terminalen din:

npm installer @neste/font

Hvis du bruker garn, kan du installere pakken ved å kjøre denne kommandoen:

garn legg til @neste/font

Bruke @next/fonten for å optimalisere Google Fonts

De @neste/font

pakken optimerer bruken av Google-fonter. De @neste/font er automatisk vert for Google-fontene på Next.js-serveren, slik at det ikke sendes noen forespørsel til Google om å få skriftene.

For å bruke en Google-font i applikasjonen, vil du importere skriften som en funksjon fra @neste/font/google inn i det _app.js fil i sider katalog:

import { Roboto } fra'@next/font/google'
konst roboto = Roboto({ delmengder: ['latin'] })
eksportmisligholdefunksjonMin App({ Component, pageProps }) {
komme tilbake (

 )
}

I kodeblokken ovenfor opprettet du en variabel font ved å bruke Roboto skriftfunksjon. De delmengde egenskapen setter fonten til latinske tegn alene; hvis du bruker et annet språk, kan du understille skriften til det språket.

Du kan også spesifisere skriftvekten sammen med skriftstilen når du definerer skriften:

konst roboto = Roboto( 
 {
 delsett: ['latin'],
 vekt: '400',
 stil: 'kursiv'
 }
)

Du spesifiserer flere skriftvekter og skriftstiler ved hjelp av matriser.

For eksempel:

konst roboto = Roboto( 
 {
 delsett: ['latin'],
 vekt: ['400', '500', '700'],
 stil: ['kursiv', 'normal']
 }
)

Deretter vil du pakke inn komponentene dine i en hoved- tag og send fonten som en klasse til hoved- stikkord:

import { Roboto } fra'@next/font/google'
konst roboto = Roboto( 
 {
 delsett: ['latin'],
 vekt: ['400', '500', '600'],
 stil: ['kursiv', 'normal']
 }
)
eksportmisligholdefunksjonMin App({ Component, pageProps }) {
komme tilbake (


 </main>
 )
}

Å gjengi applikasjonen din med kodeblokken ovenfor vil bruke skriften på hele applikasjonen. Alternativt kan du bruke skriften på en enkelt side. For å gjøre dette legger du til fonten på en bestemt side.

Som så:

import { Roboto } fra'@next/font/google'
konst roboto = Roboto( 
 {
 delsett: ['latin'],
 vekt: ['400', '500', '600'],
 stil: ['kursiv', 'normal']
 }
)
eksportmisligholdefunksjonHjem() {
komme tilbake (


Hei dere!!!</p>
 </div>
 )
}

Bruke @neste/fonten for å optimalisere lokale skrifter

De @neste/font pakken optimerer også bruken av lokale fonter. Teknikken for å optimalisere lokale fonter gjennom @neste/font pakken er ganske lik optimalisering av Google-fonter, med subtile forskjeller.

For å optimalisere lokale skrifter, bruk lokalFont funksjon levert av @neste/font pakke. Du importerer lokalFont funksjon fra @neste/font/local og deretter definere variabel font før ved å bruke skriften i Next.js-applikasjonen.

Som så:

import lokalFont fra'@neste/font/local'
konst minFont = lokalFont({ src: './my-font.woff2' })
eksportmisligholdefunksjonMin App({ Component, pageProps }) {
komme tilbake (


 </main>
 )
}

Du definerer den variable fonten minFont bruker lokalFont funksjon. De lokalFont funksjon tar et objekt som argument. Objektet har en enkelt egenskap, src, som er satt til filbanen til fontfilen i WOFF2 format "./my-font.woff2".

Du kan bruke flere skriftfiler for en enkelt skriftfamilie. For å gjøre dette, setter du inn src egenskap til en matrise som inneholder objekter av de forskjellige fontene og deres egenskaper.

For eksempel:

konst minFont = lokalFont( 
 {
 src: [
 {
 sti: './Roboto-Regular.woff2',
 vekt: '400',
 stil: 'normal',
 },
 {
 sti: './Roboto-Italic.woff2',
 vekt: '400',
 stil: 'kursiv',
 },
 {
 sti: './Roboto-Bold.woff2',
 vekt: '700',
 stil: 'normal',
 },
 {
 sti: './Roboto-BoldItalic.woff2',
 vekt: '700',
 stil: 'kursiv',
 },
 ]
 }
)

Bruke @next/fonten med Tailwind CSS

For å bruke @neste/font pakke med Tailwind CSS, du må bruke CSS-variabler. For å gjøre dette, vil du definere fonten din ved å bruke Google eller lokale fonter og deretter laste fonten med variabelalternativet for å spesifisere CSS-variabelnavnet.

For eksempel:

import { Inter } fra'@next/font/google'
konst inter = Inter({
 delsett: ['latin'],
 variabel: '--font-inter',
})
eksportmisligholdefunksjonMin App({ Component, pageProps }) {
komme tilbake (
`${inter.variable} font-sans`}>

 </main>
 )
}

I kodeblokken ovenfor opprettet du fonten, inter, og sett variabelen til --font-inter. De klassenavn av hovedelementet settes deretter til fontvariabelen og font-sans. De inter.variabel klasse vil bruke inter skrift til siden, og font-sans klasse vil bruke standard sans-serif font.

Deretter legger du til CSS-variabelen i konfigurasjonsfilen for medvind tailwind.config.cjs:

/** @type {import('tailwindcss').Config}*/
modul.exports = {
 innhold: ["./index.html",
"./src/**/*.{js, ts, jsx, tsx}",],
 tema: {
 forlenge: {
 fontFamily: {
 sans: ['var(--font-inter)'],
 },
 },
 },
 plugins: [],
}

Du kan nå bruke skriften i applikasjonen din ved å bruke font-sans klasse.

Skriftoptimalisering Med @neste/font

@next/font-pakken er en enkel og effektiv måte å optimalisere skriftinnlasting i Next.js. Denne pakken sikrer at de tilpassede skriftene dine lastes inn effektivt, og forbedrer nettstedets ytelse og brukeropplevelse. Denne artikkelen gir informasjon om hvordan du setter opp @next/font-pakken og bruker den i Next.js-applikasjonen. Du kan forbedre nettstedets ytelse ytterligere ved å optimalisere bilder.