I font rallentano le prestazioni del tuo sito? Ottimizza il tempo di caricamento dei caratteri della tua applicazione utilizzando questo pacchetto.
Potresti voler utilizzare caratteri personalizzati per rendere la tua applicazione Next.js visivamente più accattivante. L'utilizzo di caratteri personalizzati può migliorare in modo significativo l'aspetto del tuo sito Web, ma può anche rallentare le prestazioni del tuo sito se non ottimizzato correttamente. IL @successivo/font pacchetto è una soluzione a questo problema.
Il pacchetto @next/font fornisce un modo semplice ed efficiente per ottimizzare il caricamento dei font in Next.js, migliorando il tempo di caricamento della pagina e le prestazioni complessive. Questo articolo fornisce informazioni su come utilizzare @next/font nel progetto Next.js.
Installazione del pacchetto
Puoi installare il @successivo/font pacchetto eseguendo il seguente comando nel terminale:
npm installa @next/font
Se stai usando il filato, puoi installare il pacchetto eseguendo questo comando:
filato add @next/font
Utilizzo di @next/font per ottimizzare Google Fonts
IL @successivo/font pacchetto ottimizza l'utilizzo dei caratteri di Google. IL @successivo/font ospita automaticamente i caratteri Google sul server Next.js in modo che non venga inviata alcuna richiesta a Google per ottenere i caratteri.
Per utilizzare un font Google nella tua applicazione, importerai il font come funzione da @next/font/google dentro _app.js file nel pagine rubrica:
importare {Roboto} da'@successivo/font/google'cost roboto = Roboto({ sottoinsiemi: ['latino'] })
esportarepredefinitofunzioneMiaApp({Componente, pageProps}) {
ritorno (
)
}
Nel blocco di codice sopra, hai creato un carattere variabile usando il Roboto funzione carattere. IL sottoinsieme property sottoinsiemi il font ai soli caratteri latini; se usi un'altra lingua, puoi sottoimpostare il carattere in quella lingua.
È inoltre possibile specificare lo spessore del carattere insieme allo stile del carattere durante la definizione del carattere:
cost roboto = Roboto(
{
sottoinsiemi: ['latino'],
peso: '400',
stile: 'corsivo'
}
)
Puoi specificare più spessori e stili di carattere utilizzando gli array.
Per esempio:
cost roboto = Roboto(
{
sottoinsiemi: ['latino'],
peso: ['400', '500', '700'],
stile: ['corsivo', 'normale']
}
)
Successivamente, avvolgerai i tuoi componenti in un file principale tag e passare il font come classe al file principale etichetta:
importare {Roboto} da'@successivo/font/google'cost roboto = Roboto(
{
sottoinsiemi: ['latino'],
peso: ['400', '500', '600'],
stile: ['corsivo', 'normale']
}
)
esportarepredefinitofunzioneMiaApp({Componente, pageProps}) {
ritorno (
</main>
)
}
Il rendering della tua applicazione con il blocco di codice sopra applicherà il carattere all'intera applicazione. In alternativa, puoi applicare il carattere a una singola pagina. Per fare ciò, aggiungi il carattere a una pagina specifica.
Così:
importare {Roboto} da'@successivo/font/google'cost roboto = Roboto(
{
sottoinsiemi: ['latino'],
peso: ['400', '500', '600'],
stile: ['corsivo', 'normale']
}
)
esportarepredefinitofunzioneCasa() {
ritorno (Ciao a tutti!!!</p>
</div>
)
}
Utilizzo di @next/font per ottimizzare i caratteri locali
IL @successivo/font pacchetto ottimizza anche l'uso dei caratteri locali. La tecnica di ottimizzazione dei font locali attraverso il file @successivo/font è abbastanza simile all'ottimizzazione dei font di Google, con sottili differenze.
Per ottimizzare i caratteri locali, utilizzare il file localFont funzione fornita dal @successivo/font pacchetto. Importi il file localFont funzione da @next/font/local e quindi definire prima il carattere variabile utilizzando il carattere nell'applicazione Next.js.
Così:
importare localFont da'@successivo/font/locale'cost mioFont = localFont({ src: './mio-font.woff2' })
esportarepredefinitofunzioneMiaApp({Componente, pageProps}) {
ritorno (
</main>
)
}
Tu definisci il font variabile myFont usando il localFont funzione. IL localFont La funzione accetta un oggetto come argomento. L'oggetto ha un'unica proprietà, src, che è impostato sul percorso del file del font nel file WOFF2 formato "./mio-font.woff2".
È possibile utilizzare più file di font per una singola famiglia di font. Per fare ciò, imposta il src property a un array contenente oggetti dei diversi font e le loro proprietà.
Per esempio:
cost mioFont = localFont(
{
origine: [
{
sentiero: './Roboto-Regular.woff2',
peso: '400',
stile: 'normale',
},
{
sentiero: './Roboto-Italic.woff2',
peso: '400',
stile: 'corsivo',
},
{
sentiero: './Roboto-Bold.woff2',
peso: '700',
stile: 'normale',
},
{
sentiero: './Roboto-BoldItalic.woff2',
peso: '700',
stile: 'corsivo',
},
]
}
)
Usando @next/font con Tailwind CSS
Per usare il @successivo/font pacchetto con Tailwind CSS, è necessario utilizzare le variabili CSS. Per fare ciò, definirai il tuo carattere utilizzando Google o caratteri locali e quindi caricherai il tuo carattere con l'opzione variabile per specificare il nome della variabile CSS.
Per esempio:
importare { Inter } da'@successivo/font/google'cost inter = Inter({
sottoinsiemi: ['latino'],
variabile: '--font-inter',
})
esportarepredefinitofunzioneMiaApp({Componente, pageProps}) {
ritorno (`${inter.variabile} font-sans`}>
</main>
)
}
Nel blocco di codice sopra, hai creato il carattere, Inter, e impostare la variabile su --font-inter. IL nome della classe dell'elemento principale viene quindi impostato sulla variabile font e font-sans. IL inter.variabile la classe applicherà il Inter carattere alla pagina e il font-sans class applicherà il font sans-serif predefinito.
Successivamente, aggiungi la variabile CSS al file di configurazione tailwind tailwind.config.cjs:
/** @tipo {import('tailwindcss').Config}*/
modulo.esporta = {
contenuto: ["./indice.html",
"./src/**/*.{js, ts, jsx, tsx}",],
tema: {
estendere: {
famiglia di font: {
senza: ['var(--font-inter)'],
},
},
},
plugin: [],
}
Ora puoi applicare il font nella tua applicazione usando il file font-sans classe.
Ottimizzazione dei caratteri con @next/font
Il pacchetto @next/font è un modo semplice ed efficace per ottimizzare il caricamento dei font in Next.js. Questo pacchetto garantisce che i tuoi caratteri personalizzati vengano caricati in modo efficiente, migliorando le prestazioni del tuo sito Web e l'esperienza dell'utente. Questo articolo fornisce informazioni su come configurare il pacchetto @next/font e utilizzarlo nell'applicazione Next.js. Puoi migliorare ulteriormente le prestazioni del tuo sito ottimizzando le immagini.