RTL و فونت فارسی در Next.js 15: راهنمای کامل از layout تا production
نویسنده: آرش لطیفی
سایت فارسی با Next.js 15: تنظیم dir و lang، فونت وزیرمتن با font-display swap، عکس بدون پرش با next/image و PPR. با کد کامل، جدول مقایسه و چک‌لیست دیپلوی.
خلاصه (TL;DR): سه خط، نود درصد راه است:
lang="fa" dir="rtl"روی تگhtml، فونت فارسی باfont-display: swapوunicode-range، و عرض و ارتفاع مشخص رویnext/image. بقیه این مطلب جزئیات همین سه خط است + جدول مقایسه ۱۴ با ۱۵ و چک‌لیست دیپلوی.
چرا Next.js 15 برای سایت فارسی بهتر شد؟
سه چیز مهم برای ما فارسی‌زبان‌ها بهتر شده: پشتیبانی تمیزتر از dir="rtl"، کش دانه‌ای با use cache، و رندر ترکیبی با PPR که اسکلت صفحه را از بیلد می‌دهد و بخش شخصی را زنده. نتیجه: First Paint سریع‌تر و CLS کمتر — همان دو عددی که توی راهنمای سرعت سایت گفتیم رتبه گوگل را جابه‌جا می‌کند.
قدم ۱: تگ html را فارسی اعلام کن
// app/layout.tsx
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="fa" dir="rtl">
<body>{children}</body>
</html>
);
}
همین یک خط، جهت همه margin و padding و float و text-align را درست می‌کند. خیلی از باگ‌های «چرا تو فارسی به‌هم ریخت» از نبودن همین خط است، نه از CSS شما.
قدم ۲: فونت فارسی سبک و بدون پرش
دو نکته طلایی: font-display: swap یعنی متن فوراً با فونت سیستمی نمایش داده می‌شود تا فونت فارسی برسد (کاربر صفحه خالی نمی‌بیند). unicode-range یعنی مرورگر فقط بازه عربی-فارسی را دانلود می‌کند — حدود ۱۵ کیلوبایت به‌جای ۱۰۰ کیلوبایت.
قدم ۳: عکس با سایز مشخص، بدون پرش صفحه
دادن width و height باعث می‌شود مرورگر قبل از لود عکس، جایش را رزرو کند و صفحه تکان نخورد (CLS نزدیک صفر). این همان کاری است که ما روی نمونه‌کارها انجام دادیم و LCP را از ۶ ثانیه به زیر ۲ ثانیه رساندیم.
قدم ۴: PPR برای صفحات ترکیبی
اگر صفحه‌ات هم بخش ثابت دارد (هدر، فوتر) هم بخش شخصی (سبد خرید، پنل کاربر)، PPR اسکلت ثابت را از قبل رندر می‌کند و بخش شخصی را موقع بازدید تزریق می‌کند. کاربر سریع‌تر محتوا می‌بیند، سرور هم کمتر عرق می‌کند.
جدول مقایسه: Next.js 14 در برابر ۱۵ برای سایت فارسی
| ویژگی | Next.js 14 | Next.js 15 |
|---|---|---|
| پشتیبانی rtl | دستی با کلاس اضافه | تمیز با dir |
| font-display | دستی | الگوی آماده در داک |
| سایز عکس | دستی با fill | محاسبه خودکار نسبت |
| PPR | آزمایشی | آماده production |
| کش دیتا | درخواستی | دانه‌ای با use cache |
چک‌لیست قبل از دیپلوی سایت فارسی
- [ ] تگ
htmlهمlang="fa"دارد همdir="rtl" - [ ] فونت فارسی با
font-display: swapوunicode-rangeمحدود - [ ] همه عکس‌ها
widthوheightمشخص دارند - [ ] فقط وزن‌های لازم فونت لود می‌شود (400 و 700 کافی است)
- [ ] متن با فونت سیستمی هم خواناست (تست با قطع فونت)
- [ ] صفحه با کیبورد فارسی و اعداد فارسی تست شده
سوالات پرتکرار
Q: چرا با وجود dir درست، بعضی جاها چپ‌چین می‌ماند؟
احتمالاً آن کامپوننت text-left یا ml- و mr- هاردکد دارد. در Tailwind از ms- و me- و text-start استفاده کنید که با جهت صفحه می‌چرخند.
Q: متن موقع لود، یک لحظه با فونت دیگر نمایش داده می‌شود؛ طبیعی است؟
بله، اسمش FOUT است و با swap عمدی است — بهتر از صفحه خالی. اگر اذیت می‌کند، وزن‌های فونت را کم کنید تا فونت زودتر برسد، نه اینکه swap را بردارید.
Q: اعداد فارسی کجا باید باشند؟
متن مقاله: اعداد فارسی. قیمت و کد و شماره تماس: اعداد انگلیسی با dir="ltr" روی همان تکه، که ترتیب ارقام به‌هم نریزد.
جمع‌بندی
سایت فارسی خوب فرمول پیچیده‌ای ندارد: جهت درست، فونت سبک، عکس باسایز. همین سه‌تا را که رعایت کنی، هم کاربر راضی است هم گوگل. اگر داری برای کسب‌وکارت طراحی سایت می‌کنی، این چک‌لیست را از روز اول توی قرارداد بگذار: «تحویل با LCP زیر ۲.۵ ثانیه روی موبایل».