Next.js با استفاده از ماژول next/font فرآیند بارگذاری و بهینه‌سازی فونت‌ها را به‌صورت خودکار انجام می‌دهد. این ماژول درخواست‌های شبکه به سرویس‌های خارجی را حذف می‌کند و با میزبانی داخلی (Self-Hosting) فایل‌های فونت، علاوه بر افزایش سرعت، حریم خصوصی کاربران را نیز حفظ می‌کند.
یکی از مهم‌ترین مزایای next/font جلوگیری از Layout Shift هنگام بارگذاری فونت‌ها است؛ بنابراین کاربران از همان ابتدای بارگذاری صفحه، تجربه‌ای روان و بدون جابه‌جایی عناصر خواهند داشت.
مزایای next/font
-
بهینه‌سازی خودکار فونت‌ها
-
حذف درخواست‌های خارجی و افزایش حریم خصوصی (Privacy)
-
میزبانی داخلی (Self-Hosting) تمامی فایل‌های فونت
-
بهبود عملکرد (Performance) و کاهش زمان بارگذاری صفحات
-
جلوگیری از Layout Shift هنگام بارگذاری فونت‌ها
شروع کار
برای استفاده از next/font، کافی است فونت موردنظر خود را از یکی از ماژول‌های زیر وارد کنید:
-
next/font/googleبرای فونت‌های Google Fonts -
next/font/localبرای فونت‌های محلی (Local Fonts)
سپس فونت را به‌صورت یک تابع با تنظیمات موردنیاز فراخوانی کرده و className تولیدشده را به عنصر موردنظر اختصاص دهید.
import { Geist } from 'next/font/google'
const geist = Geist({
subsets: ['latin'],
})
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en" className={geist.className}>
<body>{children}</body>
</html>
)
}
اعمال فونت در کل برنامه
فونت‌هایی که با next/font بارگذاری می‌شوند، به‌صورت پیش‌فرض تنها در کامپوننتی که در آن استفاده شده‌اند در دسترس هستند. اگر قصد دارید یک فونت در تمام صفحات اپلیکیشن اعمال شود، آن را در Root Layout تعریف و استفاده کنید.
با استفاده از next/font می‌توانید فونت‌های وب را بدون نیاز به درخواست‌های خارجی، با بهترین عملکرد و بدون ایجاد تغییر ناگهانی در چیدمان صفحه بارگذاری کنید.
این محتوا کاملا رایگان توسط تیم کدلپر ترجمه شده و در اختیار شما کاربران عزیز قرار گرفته است، هر گونه کپی برداری برای مقاصد غیر رایگان و بدون ذکر منبع، مورد پیگیری قانونی قرار میگیرد.
ترجمه شده از منبع: https://nextjs.org/docs/app