نحوه استفاده از @next/font برای بهینه سازی فونت ها در Next.js

آیا فونت ها عملکرد سایت شما را کاهش می دهند؟ با استفاده از این بسته، زمان بارگذاری فونت برنامه خود را بهینه کنید.

ممکن است بخواهید از فونت های سفارشی استفاده کنید تا برنامه Next.js خود را از نظر بصری جذاب تر کنید. استفاده از فونت های سفارشی می تواند ظاهر و احساس وب سایت شما را به میزان قابل توجهی افزایش دهد، اما در صورت بهینه سازی صحیح نمی تواند عملکرد سایت شما را کاهش دهد. بسته @next/font راه حلی برای این مشکل است.

بسته @next/font راهی ساده و کارآمد برای بهینه‌سازی بارگذاری فونت در Next.js فراهم می‌کند که زمان بارگذاری صفحه و عملکرد کلی را بهبود می‌بخشد. این مقاله اطلاعاتی در مورد نحوه استفاده از @next/font در پروژه Next.js ارائه می دهد.

نصب پکیج

با اجرای دستور زیر در ترمینال خود می توانید بسته @next/font را نصب کنید:

npm install @next/font

اگر از yarn استفاده می کنید، می توانید بسته را با اجرای این دستور نصب کنید:

yarn add @next/font

استفاده از @next/font برای بهینه سازی فونت های گوگل

بسته @next/font استفاده از فونت های گوگل را بهینه می کند. @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 یک فونت متغیر ایجاد کردید. ویژگی زیرمجموعه، فونت را به تنهایی به کاراکترهای لاتین زیرمجموعه می‌کند. اگر از زبان دیگری استفاده می کنید، می توانید فونت را زیر مجموعه آن زبان قرار دهید.

همچنین می توانید وزن فونت را به همراه سبک فونت در هنگام تعریف فونت مشخص کنید:

const roboto = Roboto( 
  {
    subsets: ['latin'],
    weight: '400',
    style: 'italic'
  }
)

شما با استفاده از آرایه ها وزن و سبک فونت های متعدد را مشخص می کنید.

مثلا:

const roboto = Roboto( 
  {
    subsets: ['latin'],
    weight: ['400', '500', '700'],
    style: ['italic', 'normal']
  }
)

در مرحله بعد، اجزای خود را در یک تگ اصلی قرار می دهید و فونت را به عنوان یک کلاس به تگ اصلی منتقل می کنید:

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 کاملاً شبیه بهینه سازی فونت های گوگل است و تفاوت های ظریفی دارد.

برای بهینه سازی فونت های محلی، از تابع 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 با Tailwind CSS

برای استفاده از بسته @next/font با Tailwind CSS، باید از متغیرهای CSS استفاده کنید. برای این کار، فونت خود را با استفاده از فونت های گوگل یا محلی تعریف می کنید و سپس فونت خود را با گزینه متغیر بارگذاری می کنید تا نام متغیر 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 و font-sans تنظیم می شود. کلاس inter.variable فونت inter را روی صفحه اعمال می کند و کلاس font-sans فونت پیش فرض sans-serif را اعمال می کند.

سپس، متغیر CSS را به فایل پیکربندی tailwind 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 ارائه می دهد. با بهینه سازی تصاویر می توانید عملکرد سایت خود را بیشتر بهبود بخشید.

منبع مقاله