کامپوننت فونت Next.js (next/font): راهنمای کامل بهینه‌سازی فونت‌های وب
راهنمای جامع next/font در Next.js؛ نحوه استفاده از فونت‌های گوگل و فونت‌های محلی، حذف Layout Shift و بهینه‌سازی کامل عملکرد وب‌سایت.
فونت‌ها یکی از فراموش‌شده‌ترین بخش‌های بهینه‌سازی عملکرد وب هستند. خیلی از تیم‌ها روی تصاویر، جاوااسکریپت و کش کردن API وقت می‌گذارند، اما فونت وب را با یک <link> ساده به Google Fonts متصل می‌کنند و از کنارش رد می‌شوند. نتیجه معمولاً همان چیزی است که همه‌مان تجربه‌اش کرده‌ایم: صفحه لود می‌شود، متن با فونت پیش‌فرض سیستم نمایش داده می‌شود، و یک لحظه بعد، وقتی فونت واقعی از سرور گوگل می‌رسد، کل چیدمان صفحه می‌پرد. این پدیده Cumulative Layout Shift یا CLS نام دارد و یکی از معیارهای اصلی Core Web Vitals گوگل است.
Next.js برای حل دقیق همین مشکل، ماژول next/font را ارائه کرده است. این ماژول فونت‌ها را در زمان build دانلود و به‌صورت خودکار روی همان سرور شما میزبانی (self-host) می‌کند؛ یعنی مرورگر کاربر هیچ درخواستی به سرورهای گوگل ارسال نمی‌کند. در این مقاله قرار است این ابزار را از صفر تا استفاده حرفه‌ای در پروژه‌های واقعی بررسی کنیم.
چرا اصلاً به next/font نیاز داریم؟
قبل از اینکه سراغ کد برویم، بهتر است بدانیم این ابزار دقیقاً چه مشکلاتی را حل می‌کند:
حذف درخواست‌های خارجی: فایل‌های فونت در زمان build دانلود و در کنار بقیه‌ی فایل‌های استاتیک پروژه شما میزبانی می‌شوند. مرورگر کاربر هیچ‌وقت مستقیماً به fonts.googleapis.com وصل نمی‌شود.
حریم خصوصی بهتر: چون درخواستی به سرور گوگل ارسال نمی‌شود، هیچ داده‌ای (مثل IP کاربر) به آن سرورها فرستاده نمی‌شود.
حذف Layout Shift: Next.js با محاسبه دقیق ابعاد فونت جایگزین (fallback)، از پرش چیدمان صفحه هنگام لود شدن فونت اصلی جلوگیری می‌کند.
next/font در Next.js 16 | راهنمای کامل بهینه‌سازی فونت
عملکرد بهتر: چون فایل فونت از همان دامنه سایت شما (و نه یک دامنهی خارجی) سرو می‌شود، زمان اتصال (connection time) حذف می‌شود.
نصب و پیش‌نیازها
از نسخه‌ی 13.2 به بعد Next.js، دیگر نیازی به نصب پکیج جداگانه نیست. قبلاً این قابلیت با نام @next/font یک پکیج مستقل بود، اما الان مستقیماً داخل خود Next.js قرار دارد و فقط کافی است از next/font/google یا next/font/local ایمپورت کنید.
استفاده از فونت‌های گوگل با next/font/google
ساده‌ترین حالت استفاده، ایمپورت مستقیم یک فونت از گوگل و اعمال آن روی layout اصلی پروژه است:
app/layout.tsxtsx
import { Inter } from 'next/font/google'// اگر فونت متغیر (variable) است، نیازی به تعیین weight نیستconst inter = Inter({ subsets: ['latin'], display: 'swap',})export default function RootLayout({ children,}: { children: React.ReactNode}) { return ( <html lang="en" className={inter.className}> <body>{children}</body> </html> )}
نکته‌ی مهم: نام‌های فونتی که چند کلمه دارند (مثل Roboto Mono) باید با آندرلاین (_) ایمپورت شوند، یعنی به‌صورت Roboto_Mono.
اگر فونت شما variable نباشد، حتماً باید مقدار weight را مشخص کنید:
فونت‌های گوگل به‌صورت خودکار subset (زیرمجموعه‌ی حروف مربوط به یک زبان) می‌شوند تا حجم فایل کاهش پیدا کند. اگر preload فعال باشد (که به‌طور پیش‌فرض هست) و شما subset را مشخص نکنید، Next.js یک هشدار در کنسول نمایش می‌دهد. برای پروژه‌های انگلیسی‌زبان معمولاً کافی است:
jsx
const inter = Inter({ subsets: ['latin'] })
جدول کامل تنظیمات قابل استفاده
هر دو تابع next/font/google و next/font/local مجموعه‌ای از آپشن‌ها را می‌پذیرند که دانستن دقیق آن‌ها برای هر پروژه‌ای ضروری است:
src: مسیر فایل فونت. فقط در next/font/local استفاده می‌شود و اجباری است. می‌تواند یک رشته یا آرایه‌ای از آبجکت‌ها با path، weight و style باشد.
weight: وزن فونت. اگر فونت variable نباشد، این مقدار اجباری است. برای فونت‌های variable می‌توانید یک رنج مثل '100 900' بدهید.
style: مقدار normal یا italic (برای فونت‌های گوگل) یا هر استایل استاندارد دیگر برای فونت‌های local.
subsets: فقط برای next/font/google. آرایه‌ای از زیرمجموعه‌های زبانی که باید preload شوند.
axes: محورهای اضافه‌ی یک فونت variable (مثل slnt برای Inter)، فقط برای فونت‌های گوگل.
display: مقدار font-display در CSS، با مقادیر auto, block, swap, fallback یا optional. مقدار پیش‌فرض swap است.
preload: بولین که مشخص می‌کند فونت preload شود یا نه. پیش‌فرض true است.
fallback: آرایه‌ای از فونت‌های جایگزین در صورت شکست لود شدن فونت اصلی.
adjustFontFallback: برای فونت‌های گوگل یک بولین است که CLS را کاهش می‌دهد (پیش‌فرض true)؛ برای فونت‌های local می‌تواند 'Arial', 'Times New Roman' یا false باشد.
variable: نام یک متغیر CSS برای استفاده در روش CSS Variables.
declarations: فقط برای next/font/local؛ آرایه‌ای از توصیفگرهای @font-face مثل ascent-override.
استفاده از فونت‌های محلی (Local Fonts)
اگر فونت شما از گوگل نیست (مثلاً یک فونت اختصاصی برند)، از next/font/local استفاده می‌کنید:
app/layout.tsxtsx
import localFont from 'next/font/local'// فایل فونت می‌تواند داخل خود پوشه app قرار بگیردconst myFont = localFont({ src: './my-font.woff2', display: 'swap',})export default function RootLayout({ children,}: { children: React.ReactNode}) { return ( <html lang="en" className={myFont.className}> <body>{children}</body> </html> )}
اگر یک فونت چند فایل مختلف برای وزن‌ها و استایل‌های متفاوت دارد، src را به‌صورت آرایه می‌دهید:
در پروژه‌های واقعی معمولاً بیش از یک فونت داریم؛ مثلاً یک فونت برای متن عادی و یک فونت مونواسپیس برای کدها. دو روش استاندارد برای مدیریت این حالت وجود دارد.
روش اول: فایل utility مجزا. یک فایل جدا برای تعریف فونت‌ها می‌سازید تا هر فونت فقط وقتی واقعاً رندر می‌شود preload شود:
بعد از این تنظیم، به‌راحتی از کلاس‌های font-sans و font-mono استفاده می‌کنید.
سه روش اعمال استایل فونت
next/font سه روش برای اعمال فونت روی المان‌ها ارائه می‌دهد:
className: ساده‌ترین روش. کلاس تولیدشده را مستقیم روی المان می‌گذارید: <p className={inter.className}>
style: یک آبجکت CSS برمی‌گرداند که شامل fontFamily و فونت‌های fallback است: <p style={inter.style}>
متغیرهای CSS: برای زمانی که می‌خواهید استایل را در یک فایل CSS خارجی تعریف کنید و آپشن‌های بیشتری اضافه کنید.
فایل تعریف فونت‌ها (Font Definitions File) برای پروژه‌های بزرگ
اگر پروژه‌ی شما چند فونت مختلف دارد که در بخش‌های مختلف استفاده می‌شوند، بهتر است یک فایل مرکزی برای تعریف تمام فونت‌ها بسازید تا هر فونت فقط یک بار در کل اپلیکیشن instantiate شود:
سپس در هر جای پروژه، فقط فونت مورد نیاز را ایمپورت می‌کنید:
app/page.tsxtsx
import { inter, lora, sourceCodePro700, greatVibes } from '../styles/fonts'export default function Page() { return ( <div> <p className={inter.className}>Hello world using Inter font</p> <p style={lora.style}>Hello world using Lora font</p> <p className={sourceCodePro700.className}>Hello with weight 700</p> <p className={greatVibes.className}>My title in Great Vibes font</p> </div> )}
برای دسترسی راحت‌تر، می‌توانید در tsconfig.json یک path alias هم تعریف کنید:
نکته‌ای که خیلی از توسعه‌دهنده‌ها اشتباه متوجه می‌شوند این است: صدا زدن یک تابع فونت به‌معنی preload شدن آن در کل سایت نیست. رفتار دقیق به محل استفاده بستگی دارد:
اگر در یک page خاص استفاده شود، فقط همان مسیر preload می‌شود.
اگر در یک layout استفاده شود، تمام مسیرهای زیرمجموعه‌ی آن layout preload می‌شوند.
اگر در root layout استفاده شود، در کل سایت preload می‌شود.
چند اشتباه رایج که باید از آن‌ها دوری کنید
فراموش کردن subsets هنگام preload فعال، که باعث هشدار در کنسول می‌شود.
تعریف یک فونت داخل یک کامپوننت که چندبار رندر می‌شود؛ این کار باعث می‌شود همان فونت چندبار instantiate شود. همیشه فونت‌ها را در سطح ماژول (خارج از کامپوننت) تعریف کنید.
استفاده از تعداد زیادی فونت مختلف فقط برای تنوع بصری، بدون توجه به حجم اضافه‌شده به باندل.
نادیده گرفتن adjustFontFallback، درحالی‌که این آپشن دقیقاً همان چیزی است که Layout Shift را کاهش می‌دهد.
جمع‌بندی
next/font یکی از آن ابزارهایی است که وقتی درست استفاده شود، کاملاً نامرئی است: کاربر هیچ‌وقت متوجه نمی‌شود که فونت شما بهینه شده، فقط حس می‌کند سایت شما سریع‌تر و باثبات‌تر است. برای اکثر پروژه‌ها، شروع با یک فونت variable از Google Fonts همراه با subsets و display: 'swap' کافی است؛ و برای پروژه‌های بزرگ‌تر، ترکیب متغیرهای CSS با Tailwind و یک فایل تعریف فونت مرکزی، بهترین معماری ممکن است.
