LogoENEnglish

بهینه‌سازی فونت‌ها در Next.js – بارگذاری محلی، فونت‌های گوگل و عملکرد بدون جابه‌جایی

ماژول next/font در Next.js امکان بارگذاری بهینه فونت‌ها را فراهم می‌کند و درخواست‌های خارجی را حذف می‌کند. این مقاله نحوهٔ استفاده از فونت‌های گوگل به‌صورت self-host، بارگذاری فونت‌های محلی، و اعمال فونت به کل اپلیکیشن با کلاس‌های خودکار را بررسی می‌کند. همچنین نحوهٔ استفاده از فونت‌های متغیر و چند فایل برای یک خانواده فونت توضیح داده شده است.

Google FontsLocal Fontsnext/fontSelf-hosted fonts

~3 دقیقه مطالعه • بروزرسانی ۳ آبان ۱۴۰۴

معرفی ماژول 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 یا فونت‌های محلی، می‌توان عملکرد اپلیکیشن را افزایش داد، از جابه‌جایی چیدمان جلوگیری کرد، و تجربه‌ای سریع و زیبا برای کاربر فراهم ساخت.


نوشته و پژوهش شده توسط دکتر شاهین صیامی

Next Article