معرفی ماژول next/font
ماژول next/font فونت‌ها را به‌صورت خودکار بهینه‌سازی می‌کند و درخواست‌های خارجی را حذف می‌کند. این ماژول فونت‌ها را به‌صورت self-host بارگذاری می‌کند و از جابه‌جایی چیدمان جلوگیری می‌کند.
نحوهٔ استفاده
برای استفاده، فونت را از next/font/google یا next/font/local وارد کرده و به‌صورت تابعی فراخوانی کنید. سپس کلاس تولیدشده را به تگ <html> یا عنصر مورد نظر اعمال کنید:
// app/layout.tsx
import { Geist } from 'next/font/google'
const geist = Geist({ subsets: ['latin'] })
export default function Layout({ children }) {
return (
<html lang="en" className={geist.className}>
<body>{children}</body>
</html>
)
}فونت‌های گوگل
با استفاده از next/font/google می‌توان فونت‌های گوگل را به‌صورت self-host بارگذاری کرد. این فونت‌ها به‌عنوان فایل‌های استاتیک در دامنهٔ خودتان سرو می‌شوند و هیچ درخواست مستقیمی به گوگل ارسال نمی‌شود.
برای عملکرد بهتر، استفاده از فونت‌های متغیر توصیه می‌شود. اگر فونت متغیر در دسترس نیست، باید وزن را مشخص کنید:
// app/layout.tsx
import { Roboto } from 'next/font/google'
const roboto = Roboto({ weight: '400', subsets: ['latin'] })
export default function RootLayout({ children }) {
return (
<html lang="en" className={roboto.className}>
<body>{children}</body>
</html>
)
}فونت‌های محلی
برای استفاده از فونت‌های محلی، از next/font/local استفاده کنید و مسیر فایل فونت را مشخص نمایید. فونت‌ها می‌توانند در پوشهٔ public یا کنار فایل‌های app قرار بگیرند:
// app/layout.tsx
import localFont from 'next/font/local'
const myFont = localFont({ src: './my-font.woff2' })
export default function RootLayout({ children }) {
return (
<html lang="en" className={myFont.className}>
<body>{children}</body>
</html>
)
}استفاده از چند فایل برای یک خانواده فونت
می‌توان چند فایل با وزن و استایل مختلف برای یک خانواده فونت تعریف کرد:
const roboto = 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 در Next.js راهکاری ساده و قدرتمند برای بارگذاری بهینه فونت‌هاست. با استفاده از فونت‌های گوگل به‌صورت self-host یا فونت‌های محلی، می‌توان عملکرد اپلیکیشن را افزایش داد، از جابه‌جایی چیدمان جلوگیری کرد، و تجربه‌ای سریع و زیبا برای کاربر فراهم ساخت.