Come utilizzare @next/font per ottimizzare i caratteri in Next.js

I caratteri 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 significativamente l'aspetto del tuo sito web, ma può anche rallentare le prestazioni del tuo sito se non ottimizzato correttamente. IL@successivo/carattereIl pacchetto è una soluzione a questo problema.

Il pacchetto @next/font fornisce un modo semplice ed efficiente per ottimizzare il caricamento dei caratteri in Next.js, migliorando il tempo di caricamento della pagina e le prestazioni generali. Questo articolo fornisce informazioni su come utilizzare @next/font nel tuo progetto Next.js.

È possibile installare il@successivo/caratterepacchetto eseguendo il seguente comando nel terminale:

Se stai utilizzando Yarn, puoi installare il pacchetto eseguendo questo comando:

IL@successivo/carattere Il pacchetto ottimizza l'utilizzo dei caratteri Google. IL@successivo/carattereospita 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 carattere Google nella tua applicazione, importerai il carattere come funzione da@successivo/font/googledentro_app.jsfile nelpaginerubrica:

Nel blocco di codice sopra, hai creato un carattere variabile utilizzando il fileRobot funzione del carattere. ILsottoinsieme la proprietà sottoimposta il carattere solo sui caratteri latini; se usi un'altra lingua, puoi sottoimpostare il carattere in quella lingua.

Puoi anche specificare lo spessore del carattere insieme allo stile del carattere quando definisci il carattere:

Puoi specificare più pesi e stili di carattere utilizzando gli array.

Per esempio:

Successivamente, avvolgerai i tuoi componenti in aprincipaletag e passa il carattere come classe al fileprincipaleetichetta:

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ì:

IL@successivo/carattere Il pacchetto ottimizza inoltre l'utilizzo dei caratteri locali. La tecnica di ottimizzazione dei caratteri locali tramite il file@successivo/carattereIl pacchetto è abbastanza simile all'ottimizzazione dei caratteri di Google, con sottili differenze.

Per ottimizzare i caratteri locali, utilizzare il filelocalFontfunzione fornita da@successivo/carattere pacchetto. Importi illocalFontfunzione da@successivo/carattere/locale quindi definire il carattere variabile prima di utilizzare il carattere nell'applicazione Next.js.

Così:

Tu definisci il carattere variabilemyFontusando illocalFont funzione. ILlocalFont la funzione accetta un oggetto come argomento. L'oggetto ha una singola proprietà,src, che è impostato sul percorso del file del carattere nel fileWOFF2formato"./mio-carattere.woff2".

È possibile utilizzare più file di font per una singola famiglia di font. Per fare ciò, imposta il filesrcproprietà in un array contenente oggetti dei diversi caratteri e le relative proprietà.

Per esempio:

Per utilizzare il@successivo/carattere pacchetto con Tailwind CSS, è necessario utilizzare 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:

Nel blocco di codice sopra, hai creato il carattere,Inter,e impostare la variabile su--font-inter . ILnome della classedell'elemento principale viene quindi impostato sulla variabile font efont-sans . ILinter.variabilela classe applicherà il fileIntercarattere alla pagina e ilfont-sansapplicherà il carattere sans-serif predefinito.

Successivamente, aggiungi la variabile CSS al file di configurazione tailwind