كيف تحسّن مكتبة `next/font` أداء الخطوط؟

Question

Accepted Answer

`next/font` تحسّن خطوط الويب تلقائياً لتحسين الأداء والقضاء على تغيير التخطيط — بواسطة استضافة الخطوط ذاتياً في وقت البناء والتعامل مع تفاصيل التحميل نيابة عنك. ## استخدام خط Google ```tsx // app/layout.tsx import { Inter } from "next/font/google"; const inter = Inter({ subsets: ["latin"], // only load the character sets you need (smaller files) display: "swap", // show fallback text immediately, swap when font loads }); export default function RootLayout({ children }) { return ( {/* apply the font */} {children} ); } ``` ## ما الذي تفعله تلقائياً - **الاستضافة الذاتية** — في وقت البناء، Next يحمل خط Google ويخدمه من **نطاقك**. لا توجد طلبات إلى خوادم Google في وقت التشغيل → أسرع وأفضل للخصوصية (بدون تتبع من طرف ثالث). - **بدون تغيير تخطيط** — يحسب مقاييس الخط البديل لمطابقة خط الويب، وبالتالي عندما يتم تبديل الخط الحقيقي، لا يتحرك النص (يحمي CLS). - **التحميل المسبق والفرز** — يحمل الخط مسبقاً ويتضمن فقط مجموعات الأحرف المحددة، مما يقلل حجم التنزيل. - **بدون طلب حجب العرض** — الخطوط جزء من البناء الخاص بك، وليست جلباً خارجياً محجوباً. ## الخطوط المحلية ```tsx import localFont from "next/font/local"; const myFont = localFont({ src: "./MyFont.woff2", display: "swap" }); ``` ## لماذا تحسين الخطوط مهم الخطوط مشكلة كلاسيكية في الأداء و CLS: جلب من طرف ثالث يحجب عرض النص، ثم يسبب قفزة تخطيط عندما يتم تحميل الخط (FOUT/FOIT). القيام بهذا يدويًا يتطلب `@font-face` و `font-display` والتحميل المسبق ومطابقة مقاييس الخط البديل. ## لماذا يهم `next/font` توتوماتيكياً قائمة تحسين الخطوط كاملة — الاستضافة الذاتية (السرعة + الخصوصية)، والفرز والتحميل المسبق (أصغر وأسرع)، ومطابقة مقاييس الخط البديل (بدون تغيير تخطيط) — خلف استيراد واحد. تزيل تحسيناً معقداً وسهل الخطأ، وهي الطريقة الموصى بها لاستخدام خطوط Google والخطوط المحلية في Next.js.