Czy czcionki spowalniają działanie Twojej witryny? Zoptymalizuj czas ładowania czcionek w swojej aplikacji za pomocą tego pakietu.
Możesz użyć niestandardowych czcionek, aby Twoja aplikacja Next.js była bardziej atrakcyjna wizualnie. Korzystanie z niestandardowych czcionek może znacznie poprawić wygląd i działanie witryny, ale może również spowolnić działanie witryny, jeśli nie zostanie odpowiednio zoptymalizowana. The @następna/czcionka pakiet jest rozwiązaniem tego problemu.
Pakiet @next/font zapewnia prosty i skuteczny sposób optymalizacji ładowania czcionek w Next.js, poprawiając czas ładowania strony i ogólną wydajność. Ten artykuł zawiera informacje na temat używania @next/font w projekcie Next.js.
Instalowanie pakietu
Możesz zainstalować @następna/czcionka package, uruchamiając następującą komendę w swoim terminalu:
npm zainstaluj @next/font
Jeśli używasz przędzy, możesz zainstalować pakiet, uruchamiając to polecenie:
przędza dodaj @next/font
Używanie @next/font do optymalizacji czcionek Google
The @następna/czcionka pakiet optymalizuje użycie czcionek Google. The @następna/czcionka automatycznie hostuje czcionki Google na serwerze Next.js, dzięki czemu żadne żądanie nie jest wysyłane do Google w celu pobrania czcionek.
Aby użyć czcionki Google w swojej aplikacji, zaimportujesz czcionkę jako funkcję z @next/font/google do _app.js plik w strony informator:
import { Robot } z„@następna/czcionka/google”konst robot = robot ({ podzbiory: ['łacina'] })
eksportdomyślnyfunkcjonowaćMojaAplikacja({ Komponent, pageProps }) {
powrót (
)
}
W powyższym bloku kodu utworzyłeś zmienną czcionkę za pomocą Roboto funkcja czcionki. The podzbiór właściwość przypisuje czcionkę wyłącznie do znaków łacińskich; jeśli używasz innego języka, możesz ustawić czcionkę na ten język.
Możesz także określić grubość czcionki wraz ze stylem czcionki podczas definiowania czcionki:
konst robot = robot (
{
podzbiory: ['łacina'],
waga: '400',
styl: 'italski'
}
)
Możesz określić wiele grubości czcionek i stylów czcionek za pomocą tablic.
Na przykład:
konst robot = robot (
{
podzbiory: ['łacina'],
waga: ['400', '500', '700'],
styl: ['italski', 'normalna']
}
)
Następnie zawiniesz swoje komponenty w główny tag i przekaż czcionkę jako klasę do główny etykietka:
import { Robot } z„@następna/czcionka/google”konst robot = robot (
{
podzbiory: ['łacina'],
waga: ['400', '500', '600'],
styl: ['italski', 'normalna']
}
)
eksportdomyślnyfunkcjonowaćMojaAplikacja({ Komponent, pageProps }) {
powrót (
</main>
)
}
Renderowanie aplikacji za pomocą powyższego bloku kodu spowoduje zastosowanie czcionki do całej aplikacji. Alternatywnie możesz zastosować czcionkę do pojedynczej strony. Aby to zrobić, dodaj czcionkę do określonej strony.
jak tak:
import { Robot } z„@następna/czcionka/google”konst robot = robot (
{
podzbiory: ['łacina'],
waga: ['400', '500', '600'],
styl: ['italski', 'normalna']
}
)
eksportdomyślnyfunkcjonowaćDom() {
powrót (Witam!!!</p>
</div>
)
}
Używanie @next/font do optymalizacji lokalnych czcionek
The @następna/czcionka Pakiet optymalizuje również użycie lokalnych czcionek. Technika optymalizacji lokalnych czcionek poprzez @następna/czcionka Pakiet jest dość podobny do optymalizacji czcionek Google, z subtelnymi różnicami.
Aby zoptymalizować lokalne czcionki, użyj lokalna czcionka funkcja zapewniana przez @następna/czcionka pakiet. Importujesz lokalna czcionka funkcja od @next/font/local a następnie zdefiniuj wcześniej zmienną czcionkę używając czcionki w aplikacji Next.js.
jak tak:
import lokalna czcionka z„@następna/czcionka/lokalna”konst mojaCzcionka = lokalnaCzcionka({ źródło: „./moja-czcionka.woff2” })
eksportdomyślnyfunkcjonowaćMojaAplikacja({ Komponent, pageProps }) {
powrót (
</main>
)
}
Ty definiujesz zmienną czcionkę moja czcionka używając lokalna czcionka funkcjonować. The lokalna czcionka funkcja przyjmuje obiekt jako argument. Obiekt ma jedną właściwość, źródło, która jest ustawiona na ścieżkę pliku czcionki w pliku WOFF2 format "./moja-czcionka.woff2".
Możesz użyć wielu plików czcionek dla jednej rodziny czcionek. Aby to zrobić, ustaw źródło property do tablicy zawierającej obiekty różnych czcionek i ich właściwości.
Na przykład:
konst mojaCzcionka = lokalnaCzcionka(
{
źródło: [
{
ścieżka: „./Roboto-Regular.woff2”,
waga: '400',
styl: 'normalna',
},
{
ścieżka: „./Roboto-kursywa.woff2”,
waga: '400',
styl: 'italski',
},
{
ścieżka: „./Roboto-Bold.woff2”,
waga: '700',
styl: 'normalna',
},
{
ścieżka: „./Roboto-BoldItalic.woff2”,
waga: '700',
styl: 'italski',
},
]
}
)
Używanie @next/font z CSS Tailwind
Aby użyć @następna/czcionka paczka z CSS Tailwind, musisz użyć zmiennych CSS. Aby to zrobić, zdefiniuj swoją czcionkę za pomocą czcionek Google lub lokalnych, a następnie załaduj czcionkę z opcją zmiennej, aby określić nazwę zmiennej CSS.
Na przykład:
import { Inter } z„@następna/czcionka/google”konst inter = Inter({
podzbiory: ['łacina'],
zmienny: '--font-inter',
})
eksportdomyślnyfunkcjonowaćMojaAplikacja({ Komponent, pageProps }) {
powrót (`${zmienna.inter.} font-sans`}>
</main>
)
}
W powyższym bloku kodu utworzyłeś czcionkę, pochować, i ustaw zmienną na --font-inter. The Nazwa klasy głównego elementu jest następnie ustawiana na zmienną czcionki i czcionka-sans. The międzyzmienna klasa zastosuje pochować czcionkę na stronie i czcionka-sans class zastosuje domyślną czcionkę bezszeryfową.
Następnie dodaj zmienną CSS do pliku konfiguracyjnego Tailwind tailwind.config.cjs:
/** @typ {import('tailwindcss').Config}*/
moduł.eksport = {
treść: ["./indeks.html",
"./src/**/*.{js, ts, jsx, tsx}",],
temat: {
rozszerzyć: {
rodzina czcionek: {
bez: ['var(--font-inter)'],
},
},
},
wtyczki: [],
}
Możesz teraz zastosować czcionkę w swojej aplikacji za pomocą czcionka-sans klasa.
Optymalizacja czcionek za pomocą @next/font
Pakiet @next/font to prosty i skuteczny sposób optymalizacji ładowania czcionek w Next.js. Ten pakiet zapewnia wydajne ładowanie niestandardowych czcionek, poprawiając wydajność witryny i wygodę użytkownika. Ten artykuł zawiera informacje na temat konfigurowania pakietu @next/font i używania go w aplikacji Next.js. Możesz jeszcze bardziej poprawić wydajność swojej witryny, optymalizując obrazy.
