next/font ले फन्टहरूलाई कसरी अनुकूलन गर्छ?

Question

Accepted Answer

`next/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} ); } ``` ## यसले स्वचालित रूपमा के गर्छ - **आत्मसेवा** — निर्माण समयमा, Next ले गुगल फन्ट डाउनलोड गर्छ र तपाइँको डोमेनबाट सेवा गर्छ। गुगलको सर्भरमा कुनै रनटाइम अनुरोध छैन → तेज र गोपनीयताको लागि राम्रो (कुनै तृतीय-पक्ष ट्र्याकिङ छैन)। - **शून्य लेआउट परिवर्तन** — यो फेलब्याक फन्टको मेट्रिक्सको गणना गर्छ वेब फन्टसँग मेल खाने लागि, त्यसैले जब वास्तविक फन्ट स्वैप हुन्छ, पाठ उफ्रिंदैन (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` ले सम्पूर्ण फन्ट-कार्यक्षमता चेकलिस्टलाई स्वचालित गर्छ — आत्मसेवा (गति + गोपनीयता), सबसेटिङ र पूर्वलोडिङ (साना, तेज), र फेलब्याक मेट्रिक मिलान (कुनै लेआउट परिवर्तन छैन) — एक आयात पछाडि। यसले एक जटिल, गलत गर्न सजिलो अनुकूलन हटाउँछ र Next.js मा गुगल र स्थानीय दुवै फन्टहरू प्रयोग गर्ने अनुशंसित तरिका हो।