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

| Google Fonts |

| Local Fonts |

| next/font |

| Self-hosted fonts |

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