مقدمه
Next.js یکی از فریم‌ورک‌های معروف برای ساخت برنامه‌های React است که ویژگی‌ها و ابزارهای بسیار کاربردی جهت توسعه بهتر و سریع‌تر اپلیکیشن‌ها ارائه می‌دهد. یکی از این امکانات، ماژول Font است که به توسعه‌دهندگان اجازه می‌دهد تا فونت‌ها را به‌راحتی و به‌شیوه‌ای بهینه به پروژه‌های خود اضافه کنند. در این مطلب، به بررسی ماژول Font در Next.js و نحوه استفاده از آن خواهیم پرداخت.
معمولاً استفاده از فونت‌های سفارشی یکی از اولین گام‌های طراحی در وب است که می‌تواند تأثیر زیادی در ظاهر و حس یک وب‌سایت داشته باشد. با استفاده از ماژول Font در Next.js شما می‌توانید این کار را به‌صورت دینامیک انجام دهید و کنترل بیشتری بر بارگذاری و استفاده از فونت‌ها داشته باشید.
در ادامه به‌صورت گام‌به‌گام به نحوه اضافه کردن فونت‌های سفارشی با استفاده از ماژول Font و پیکربندی‌های مربوطه خواهیم پرداخت. سپس به توضیحات دقیق و مرتبی از کد نمونه خواهیم پرداخت که به شما کمک می‌کند این عملیات را در پروژه واقعی خود پیاده‌سازی کنید. بیایید بدون معطلی شروع کنیم!
شروع کار با ماژول Font
در Next.js، استفاده از فونت‌ها می‌تواند به‌سادگی و با استفاده از ماژول Font انجام شود که به شما امکان می‌دهد فونت‌های مختلفی را با کمترین زحمت ممکن بارگذاری کنید. مراحل زیر را دنبال کنید:
import Head from 'next/head';
export default function Home() {
return (
<div>
<Head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" />
</Head>
<main>
<h1>خوش آمدید به Next.js</h1>
<p style={{ fontFamily: 'Roboto, sans-serif' }}>
این متن با استفاده از فونت Roboto نمایش داده می‌شود.
</p>
</main>
</div>
);
}
توضیحات کد
import Head from 'next/head';
این خط کتابخانه Head را از داخل Next.js وارد می‌کند که به‌ما اجازه می‌دهد تا تغییراتی در بخش <head> صفحات ایجاد کنیم.
export default function Home() {
این خط تابع Home را تعریف کرده و به‌عنوان تابع پیش‌فرض برای خروجی ما صادر می‌کند.
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" />
این خط یک لینک به فایل استایل فونت Roboto درون قسمت <head> اضافه می‌کند.
<p style={{ fontFamily: 'Roboto, sans-serif' }}>
این خط استایل فونت را داخل تگ <p> با استفاده از فونت Roboto اعمال می‌کند.