Jak používat @next/font k optimalizaci písem v Next.js

Možná budete chtít použít vlastní písma, aby vaše aplikace Next.js byla vizuálně přitažlivější. Použití vlastních písem může výrazně zlepšit vzhled a dojem z vašeho webu, ale může také zpomalit výkon vašeho webu, pokud není správně optimalizován. The @další/font balíček je řešením tohoto problému.

Balíček @next/font poskytuje jednoduchý a efektivní způsob, jak optimalizovat načítání písem v Next.js, čímž se zlepšuje doba načítání stránky a celkový výkon. Tento článek poskytuje informace o tom, jak používat @next/font v projektu Next.js.

Instalace balíčku

Můžete nainstalovat @další/font balíček spuštěním následujícího příkazu ve vašem terminálu:

npm install @next/font

Pokud používáte přízi, můžete balíček nainstalovat spuštěním tohoto příkazu:

příze přidat @další/font

Použití @next/font k optimalizaci písem Google

The @další/font balíček optimalizuje použití písem Google. The @další/font automaticky samohostuje písma Google na serveru Next.js, takže společnosti Google není odeslán žádný požadavek na získání písem.

Chcete-li ve své aplikaci použít písmo Google, importujte písmo jako funkci z @next/font/google do _app.js soubor v stránky adresář:

import { Roboto } z'@next/font/google'
konst roboto = Roboto({ podmnožiny: ['latinský'] })
vývoznívýchozífunkceMoje aplikace({ Component, pageProps }) {
vrátit se (

 )
}

Ve výše uvedeném bloku kódu jste vytvořili variabilní písmo pomocí Roboto funkce písma. The podmnožina vlastnost nastaví písmo pouze na znaky latinky; pokud používáte jiný jazyk, můžete písmo podřídit tomuto jazyku.

Při definování písma můžete také určit tloušťku písma spolu se stylem písma:

konst roboto = roboto( 
 {
 podmnožiny: ['latinský'],
 hmotnost: '400',
 styl: 'kurzíva'
 }
)

Pomocí polí můžete určit více tlouštěk a stylů písem.

Například:

konst roboto = roboto( 
 {
 podmnožiny: ['latinský'],
 hmotnost: ['400', '500', '700'],
 styl: ['kurzíva', 'normální']
 }
)

Dále zabalíte komponenty do a hlavní tag a předejte písmo jako třídu do hlavní štítek:

import { Roboto } z'@next/font/google'
konst roboto = roboto( 
 {
 podmnožiny: ['latinský'],
 hmotnost: ['400', '500', '600'],
 styl: ['kurzíva', 'normální']
 }
)
vývoznívýchozífunkceMoje aplikace({ Component, pageProps }) {
vrátit se (


 </main>
 )
}

Vykreslení aplikace pomocí bloku kódu výše použije písmo na celou aplikaci. Alternativně můžete písmo použít na jednu stránku. Chcete-li to provést, přidejte písmo na konkrétní stránku.

Jako tak:

import { Roboto } z'@next/font/google'
konst roboto = roboto( 
 {
 podmnožiny: ['latinský'],
 hmotnost: ['400', '500', '600'],
 styl: ['kurzíva', 'normální']
 }
)
vývoznívýchozífunkceDomov() {
vrátit se (


Dobrý den!!!</p>
 </div>
 )
}

Použití @next/font k optimalizaci místních písem

The @další/font balíček také optimalizuje použití místních písem. Technika optimalizace místních písem prostřednictvím rozhraní @další/font balíček je docela podobný optimalizaci písem Google, s jemnými rozdíly.

Chcete-li optimalizovat místní písma, použijte localFont funkce, kterou poskytuje @další/font balík. Importujete localFont funkce od @next/font/local a poté definujte své variabilní písmo předtím pomocí písma v aplikaci Next.js.

Jako tak:

import localFont z'@next/font/local'
konst myFont = localFont({ src: './my-font.woff2' })
vývoznívýchozífunkceMoje aplikace({ Component, pageProps }) {
vrátit se (


 </main>
 )
}

Definujete variabilní font myFont za použití localFont funkce. The localFont funkce bere objekt jako svůj argument. Objekt má jedinou vlastnost, src, která je nastavena na cestu k souboru fontu v WOFF2 formát "./my-font.woff2".

Pro jednu rodinu písem můžete použít více souborů písem. Chcete-li to provést, nastavte src vlastnost na pole obsahující objekty různých písem a jejich vlastnosti.

Například:

konst myFont = localFont( 
 {
 src: [
 {
 cesta: './Roboto-Regular.woff2',
 hmotnost: '400',
 styl: 'normální',
 },
 {
 cesta: './Roboto-Italic.woff2',
 hmotnost: '400',
 styl: 'kurzíva',
 },
 {
 cesta: './Roboto-Bold.woff2',
 hmotnost: '700',
 styl: 'normální',
 },
 {
 cesta: './Roboto-BoldItalic.woff2',
 hmotnost: '700',
 styl: 'kurzíva',
 },
 ]
 }
)

Použití @next/font s Tailwind CSS

Chcete-li použít @další/font balíček s Tailwind CSS, musíte použít proměnné CSS. Chcete-li to provést, definujete své písmo pomocí Google nebo místních písem a poté načtete písmo s možností proměnné, která určí název proměnné CSS.

Například:

import { Pohřbít } z'@next/font/google'
konst inter = Inter({
 podmnožiny: ['latinský'],
 proměnná: '--font-inter',
})
vývoznívýchozífunkceMoje aplikace({ Component, pageProps }) {
vrátit se (
`${inter.variable} font-sans'}>

 </main>
 )
}

Ve výše uvedeném bloku kódu jste vytvořili písmo, pohřbít, a nastavte proměnnou na --font-inter. The jméno třídy hlavního prvku je pak nastavena na proměnnou font a font-sans. The meziproměnná třída bude uplatňovat pohřbít písmo na stránku a font-sans class použije výchozí bezpatkové písmo.

Dále přidáte proměnnou CSS do konfiguračního souboru tailwind tailwind.config.cjs:

/** @typ {import('tailwindcss').Config}*/
modul.exports = {
 obsah: ["./index.html",
"./src/**/*.{js, ts, jsx, tsx}",],
 téma: {
 prodloužit: {
 fontFamily: {
 bez: ['var(--font-inter)'],
 },
 },
 },
 pluginy: [],
}

Nyní můžete použít písmo ve své aplikaci pomocí font-sans třída.

Optimalizace písma pomocí @next/font

Balíček @next/font je jednoduchý a efektivní způsob, jak optimalizovat načítání písem v Next.js. Tento balíček zajišťuje, že se vaše vlastní písma načítají efektivně, čímž se zlepšuje výkon vašeho webu a uživatelská zkušenost. Tento článek poskytuje informace o tom, jak nastavit balíček @next/font a jak jej používat ve vaší aplikaci Next.js. Výkon svého webu můžete dále zlepšit optimalizací obrázků.