next/font فونٹس کو کیسے بہتر بناتا ہے؟

Question

Accepted Answer

`next/font` خودکار طور پر ویب فونٹس کو بہتر بناتا ہے تاکہ کارکردگی میں بہتری آئے اور لے آؤٹ شفٹ ختم ہو — بنانے کے وقت فونٹس کو خود میزبانی کرتے ہوئے اور لوڈنگ کی تفصیلات کو آپ کے لیے سنبھالتے ہوئے۔ ## Google Font استعمال کرنا ```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} ); } ``` ## یہ خودکار طور پر کیا کرتا ہے - **Self-hosting** — بنانے کے وقت، Next Google Font کو ڈاؤن لوڈ کرتا ہے اور اسے **آپ کے** ڈومین سے پیش کرتا ہے۔ رن ٹائم پر Google کے سرورز کی کوئی درخواست نہیں → تیز تر اور رازداری کے لیے بہتر (کوئی تیسری پارٹی ٹریکنگ نہیں)۔ - **Zero layout shift** — یہ fallback فونٹ کے میٹرکس کا حساب لگاتا ہے تاکہ ویب فونٹ سے مماثل ہو، تو جب اصل فونٹ بدل جائے تو متن نہیں چھلانگ لگاتا (CLS کی حفاظت کرتا ہے)۔ - **Preloading & subsetting** — فونٹ کو preload کرتا ہے اور صرف مخصوص حروف subsets کو شامل کرتا ہے، ڈاؤن لوڈ کو چھوٹا کرتا ہے۔ - **No render-blocking request** — فونٹس آپ کی build کا حصہ ہیں، blocking خارجی fetch نہیں۔ ## Local فونٹس ```tsx import localFont from "next/font/local"; const myFont = localFont({ src: "./MyFont.woff2", display: "swap" }); ``` ## فونٹ بہتری کیوں اہم ہے فونٹس کلاسیکی کارکردگی اور CLS مسئلہ ہیں: ایک تیسری پارٹی fetch جو متن کی rendering کو block کرتی ہے، پھر جب فونٹ لوڈ ہوتا ہے تو لے آؤٹ کی چھلانگ کا سبب بنتا ہے (FOUT/FOIT)۔ یہ صحیح طریقے سے دستی طور پر کرنے کے لیے `@font-face`، `font-display`، preloading، اور fallback-metric matching کی ضرورت ہے۔ ## فونٹ بہتری کیوں ضروری ہے `next/font` مکمل فونٹ-کارکردگی چیک لسٹ کو خودکار بناتا ہے — self-hosting (رفتار + رازداری)، subsetting اور preloading (چھوٹے، تیز تر)، اور fallback metric matching (کوئی لے آؤٹ شفٹ نہیں) — ایک import کے پیچھے۔ یہ ایک مشکل، غلطی سے آسانی سے حاصل کیا جانے والا optimization ہٹاتا ہے اور Next.js میں Google اور local دونوں فونٹس استعمال کرنے کا سفارش شدہ طریقہ ہے۔