Как использовать @next/font для оптимизации шрифтов в Next.js
Шрифты замедляют работу вашего сайта? Оптимизируйте время загрузки шрифтов вашего приложения с помощью этого пакета.
Возможно, вы захотите использовать собственные шрифты, чтобы сделать ваше приложение Next.js более привлекательным. Использование пользовательских шрифтов может значительно улучшить внешний вид вашего веб-сайта, но также может замедлить его производительность, если его не оптимизировать должным образом. Пакет @next/font решает эту проблему.
Пакет @next/font предоставляет простой и эффективный способ оптимизации загрузки шрифтов в Next.js, улучшая время загрузки страницы и повышая общую производительность. В этой статье представлена информация о том, как использовать @next/font в проекте Next.js.
Установка пакета
Вы можете установить пакет @next/font, выполнив в терминале следующую команду:
npm install @next/font
Если вы используете пряжу, вы можете установить пакет, выполнив следующую команду:
yarn add @next/font
Использование @next/font для оптимизации шрифтов Google
Пакет @next/font оптимизирует использование шрифтов Google. @next/font автоматически размещает шрифты Google на сервере Next.js, поэтому в Google не отправляется запрос на получение шрифтов.
Чтобы использовать шрифт Google в своем приложении, вы импортируете шрифт как функцию из @next/font/google в файл _app.js на страницах. каталог:
import { Roboto } from '@next/font/google'
const roboto = Roboto({ subsets: ['latin'] })
export default function MyApp({ Component, pageProps }) {
return (
<Component {...pageProps} />
)
}
В приведенном выше блоке кода вы создали переменный шрифт с помощью функции шрифта Roboto. Свойство subset задает шрифт только латинскими символами; если вы используете другой язык, вы можете установить шрифт на этот язык.
Вы также можете указать толщину шрифта вместе со стилем при определении шрифта:
const roboto = Roboto(
{
subsets: ['latin'],
weight: '400',
style: 'italic'
}
)
Вы указываете несколько толщин и стилей шрифтов, используя массивы.
Например:
const roboto = Roboto(
{
subsets: ['latin'],
weight: ['400', '500', '700'],
style: ['italic', 'normal']
}
)
Затем вы обернете свои компоненты в тег main и передадите шрифт как класс в тег main:
import { Roboto } from '@next/font/google'
const roboto = Roboto(
{
subsets: ['latin'],
weight: ['400', '500', '600'],
style: ['italic', 'normal']
}
)
export default function MyApp({ Component, pageProps }) {
return (
<main className={roboto.className}>
<Component {...pageProps} />
</main>
)
}
При рендеринге приложения с помощью приведенного выше блока кода шрифт будет применен ко всему приложению. Альтернативно вы можете применить шрифт к одной странице. Для этого вы добавляете шрифт на конкретную страницу.
Вот так:
import { Roboto } from '@next/font/google'
const roboto = Roboto(
{
subsets: ['latin'],
weight: ['400', '500', '600'],
style: ['italic', 'normal']
}
)
export default function Home() {
return (
<div className={roboto.className}>
<p>Hello There!!!</p>
</div>
)
}
Использование @next/font для оптимизации локальных шрифтов
Пакет @next/font также оптимизирует использование локальных шрифтов. Методика оптимизации локальных шрифтов с помощью пакета @next/font очень похожа на оптимизацию шрифтов Google с небольшими отличиями.
Чтобы оптимизировать локальные шрифты, используйте функцию localFont, предоставляемую пакетом @next/font. Вы импортируете функцию localFont из @next/font/local, а затем определяете переменный шрифт перед его использованием в приложении Next.js.
Вот так:
import localFont from '@next/font/local'
const myFont = localFont({ src: './my-font.woff2' })
export default function MyApp({ Component, pageProps }) {
return (
<main className={myFont.className}>
<Component {...pageProps} />
</main>
)
}
Переменный шрифт myFont определяется с помощью функции localFont. Функция localFont принимает объект в качестве аргумента. У объекта есть единственное свойство src, которому присвоен путь к файлу шрифта в формате WOFF2 "./my-font.woff2" .
Вы можете использовать несколько файлов шрифтов для одного семейства шрифтов. Для этого вы устанавливаете свойство src для массива, содержащего объекты разных шрифтов и их свойства.
Например:
const myFont = localFont(
{
src: [
{
path: './Roboto-Regular.woff2',
weight: '400',
style: 'normal',
},
{
path: './Roboto-Italic.woff2',
weight: '400',
style: 'italic',
},
{
path: './Roboto-Bold.woff2',
weight: '700',
style: 'normal',
},
{
path: './Roboto-BoldItalic.woff2',
weight: '700',
style: 'italic',
},
]
}
)
Использование @next/font с CSS Tailwind
Чтобы использовать пакет @next/font с Tailwind CSS, вам необходимо использовать переменные CSS. Для этого вы определите свой шрифт, используя Google или локальные шрифты, а затем загрузите свой шрифт с опцией переменной, чтобы указать имя переменной CSS.
Например:
import { Inter } from '@next/font/google'
const inter = Inter({
subsets: ['latin'],
variable: '--font-inter',
})
export default function MyApp({ Component, pageProps }) {
return (
<main className={`${inter.variable} font-sans`}>
<Component {...pageProps} />
</main>
)
}
В приведенном выше блоке кода вы создали шрифт inter и установили переменную в значение --font-inter. Затем className основного элемента присваивается переменная шрифта и font-sans. Класс inter.variable применит к странице шрифт inter, а класс font-sans применит шрифт без засечек по умолчанию.
Затем вы добавляете переменную CSS в файл конфигурации попутного ветра tailwind.config.cjs:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./index.html",
"./src/**/*.{js,ts,jsx,tsx}",],
theme: {
extend: {
fontFamily: {
sans: ['var(--font-inter)'],
},
},
},
plugins: [],
}
Теперь вы можете применить шрифт в своем приложении, используя класс font-sans.
Оптимизация шрифтов с помощью @next/font
Пакет @next/font — это простой и эффективный способ оптимизировать загрузку шрифтов в Next.js. Этот пакет гарантирует эффективную загрузку ваших пользовательских шрифтов, улучшая производительность вашего веб-сайта и удобство использования. В этой статье представлена информация о том, как настроить пакет @next/font и использовать его в приложении Next.js. Вы можете еще больше улучшить производительность своего сайта, оптимизировав изображения.