Next.js में फ़ॉन्ट्स को ऑप्टिमाइज़ करने के लिए @next/font का उपयोग कैसे करें

हो सकता है कि आप अपने Next.js एप्लिकेशन को देखने में अधिक आकर्षक बनाने के लिए कस्टम फ़ॉन्ट का उपयोग करना चाहें। कस्टम फोंट का उपयोग करने से आपकी वेबसाइट के रंगरूप में काफी वृद्धि हो सकती है, लेकिन यदि ठीक से अनुकूलित नहीं किया गया तो यह आपकी साइट के प्रदर्शन को धीमा भी कर सकता है। @ अगला/फ़ॉन्ट पैकेज ही इस समस्या का समाधान है।

@next/font पैकेज नेक्स्ट.जेएस में फॉन्ट लोडिंग को अनुकूलित करने के लिए एक सरल और कुशल तरीका प्रदान करता है, पेज लोडिंग समय और समग्र प्रदर्शन में सुधार करता है। यह आलेख आपके Next.js प्रोजेक्ट में @next/font का उपयोग करने के तरीके के बारे में जानकारी प्रदान करता है।

पैकेज स्थापित करना

आप इंस्टॉल कर सकते हैं @ अगला/फ़ॉन्ट पैकेज अपने टर्मिनल में निम्न आदेश चलाकर:

एनपीएम इंस्टॉल @ अगला/फ़ॉन्ट

यदि आप यार्न का उपयोग कर रहे हैं, तो आप इस कमांड को चलाकर पैकेज को स्थापित कर सकते हैं:

यार्न @ अगला/फ़ॉन्ट जोड़ें

Google फ़ॉन्ट्स को अनुकूलित करने के लिए @next/font का उपयोग करना

@ अगला/फ़ॉन्ट पैकेज Google फ़ॉन्ट्स के उपयोग को अनुकूलित करता है। @ अगला/फ़ॉन्ट Google फ़ॉन्ट को स्वचालित रूप से Next.js सर्वर पर स्वयं-होस्ट करता है ताकि फ़ॉन्ट प्राप्त करने के लिए Google को कोई अनुरोध न भेजा जाए.

अपने एप्लिकेशन में Google फ़ॉन्ट का उपयोग करने के लिए, आप फ़ॉन्ट को फ़ंक्शन के रूप में आयात करेंगे @ अगला/फ़ॉन्ट/गूगल में _app.js फ़ाइल में पृष्ठों निर्देशिका:

आयात {रोबोटो} से'@ अगला/फ़ॉन्ट/गूगल'
कॉन्स्ट रोबोटो = रोबोटो ({ सबसेट: ['लैटिन'] })
निर्यातगलती करनासमारोहMyApp({घटक, पेजप्रॉप्स}) {
वापस करना (

 )
}

उपरोक्त कोड ब्लॉक में, आपने रोबोटो फ़ॉन्ट समारोह। सबसेट गुण केवल लैटिन वर्णों के फ़ॉन्ट को उपसमुच्चय करता है; यदि आप किसी अन्य भाषा का उपयोग करते हैं, तो आप उस भाषा में फ़ॉन्ट सब्मिट कर सकते हैं।

फ़ॉन्ट को परिभाषित करते समय आप फ़ॉन्ट शैली के साथ-साथ फ़ॉन्ट वजन भी निर्दिष्ट कर सकते हैं:

कॉन्स्ट रोबोटो = रोबोटो ( 
 {
 उपसमुच्चय: ['लैटिन'],
 वज़न: '400',
 शैली: 'इटैलिक'
 }
)

आप सरणियों का उपयोग करके एकाधिक फ़ॉन्ट भार और फ़ॉन्ट शैली निर्दिष्ट करते हैं।

उदाहरण के लिए:

कॉन्स्ट रोबोटो = रोबोटो ( 
 {
 उपसमुच्चय: ['लैटिन'],
 वज़न: ['400', '500', '700'],
 शैली: ['इटैलिक', 'सामान्य']
 }
)

अगला, आप अपने घटकों को एक में लपेटेंगे मुख्य टैग करें और फ़ॉन्ट को कक्षा के रूप में पास करें मुख्य उपनाम:

आयात {रोबोटो} से'@ अगला/फ़ॉन्ट/गूगल'
कॉन्स्ट रोबोटो = रोबोटो ( 
 {
 उपसमुच्चय: ['लैटिन'],
 वज़न: ['400', '500', '600'],
 शैली: ['इटैलिक', 'सामान्य']
 }
)
निर्यातगलती करनासमारोहMyApp({घटक, पेजप्रॉप्स}) {
वापस करना (


 </main>
 )
}

उपरोक्त कोड ब्लॉक के साथ अपने आवेदन को प्रस्तुत करने से आपके पूरे आवेदन पर फ़ॉन्ट लागू हो जाएगा। वैकल्पिक रूप से, आप फ़ॉन्ट को एक पृष्ठ पर लागू कर सकते हैं। ऐसा करने के लिए, आप किसी विशिष्ट पृष्ठ पर फ़ॉन्ट जोड़ते हैं।

जैसे इतना:

आयात {रोबोटो} से'@ अगला/फ़ॉन्ट/गूगल'
कॉन्स्ट रोबोटो = रोबोटो ( 
 {
 उपसमुच्चय: ['लैटिन'],
 वज़न: ['400', '500', '600'],
 शैली: ['इटैलिक', 'सामान्य']
 }
)
निर्यातगलती करनासमारोहघर() {
वापस करना (


नमस्ते वहाँ!!!</p>
 </div>
 )
}

स्थानीय फ़ॉन्ट्स को अनुकूलित करने के लिए @next/font का उपयोग करना

@ अगला/फ़ॉन्ट पैकेज स्थानीय फोंट के उपयोग को भी अनुकूलित करता है। के माध्यम से स्थानीय फोंट को अनुकूलित करने की तकनीक @ अगला/फ़ॉन्ट पैकेज सूक्ष्म अंतर के साथ Google फोंट के अनुकूलन के समान है।

स्थानीय फोंट का अनुकूलन करने के लिए, का उपयोग करें स्थानीयफ़ॉन्ट समारोह द्वारा प्रदान किया गया @ अगला/फ़ॉन्ट पैकेट। आप आयात करें स्थानीयफ़ॉन्ट से समारोह @ अगला/फ़ॉन्ट/स्थानीय और उसके बाद पहले अपने परिवर्तनीय फ़ॉन्ट को परिभाषित करें अपने Next.js एप्लिकेशन में फ़ॉन्ट का उपयोग करना.

जैसे इतना:

आयात स्थानीयफ़ॉन्ट से'@ अगला/फ़ॉन्ट/स्थानीय'
कॉन्स्ट मायफॉन्ट = लोकलफॉन्ट ({ स्रोत: './my-font.woff2' })
निर्यातगलती करनासमारोहMyApp({घटक, पेजप्रॉप्स}) {
वापस करना (


 </main>
 )
}

आप चर फ़ॉन्ट को परिभाषित करते हैं myFont का उपयोग स्थानीयफ़ॉन्ट समारोह। स्थानीयफ़ॉन्ट फ़ंक्शन किसी वस्तु को उसके तर्क के रूप में लेता है। वस्तु में एक ही संपत्ति है, स्रोत, जो WOFF2 प्रारूप "./my-font.woff2".

आप एकल फ़ॉन्ट परिवार के लिए एकाधिक फ़ॉन्ट फ़ाइलों का उपयोग कर सकते हैं। ऐसा करने के लिए, आप सेट करें स्रोत विभिन्न फोंट और उनके गुणों की वस्तुओं वाली सरणी में संपत्ति।

उदाहरण के लिए:

कॉन्स्ट मायफॉन्ट = लोकलफॉन्ट ( 
 {
 स्रोत: [
 {
 पथ: './Roboto-Regular.woff2',
 वज़न: '400',
 शैली: 'सामान्य',
 },
 {
 पथ: './Roboto-Italic.woff2',
 वज़न: '400',
 शैली: 'इटैलिक',
 },
 {
 पथ: './Roboto-Bold.woff2',
 वज़न: '700',
 शैली: 'सामान्य',
 },
 {
 पथ: './Roboto-BoldItalic.woff2',
 वज़न: '700',
 शैली: 'इटैलिक',
 },
 ]
 }
)

Tailwind CSS के साथ @next/font का उपयोग करना

उपयोग करने के लिए @ अगला/फ़ॉन्ट टेलविंड सीएसएस के साथ पैकेज, आपको CSS चर का उपयोग करने की आवश्यकता है. ऐसा करने के लिए, आप Google या स्थानीय फोंट का उपयोग करके अपने फ़ॉन्ट को परिभाषित करेंगे और फिर CSS चर नाम निर्दिष्ट करने के लिए अपने फ़ॉन्ट को चर विकल्प के साथ लोड करेंगे।

उदाहरण के लिए:

आयात { अंतर } से'@ अगला/फ़ॉन्ट/गूगल'
कॉन्स्ट इंटर = इंटर ({
 उपसमुच्चय: ['लैटिन'],
 चर: '--फ़ॉन्ट-इंटर',
})
निर्यातगलती करनासमारोहMyApp({घटक, पेजप्रॉप्स}) {
वापस करना (
`${अंतर.चर} फॉन्ट-संस'}>

 </main>
 )
}

उपरोक्त कोड ब्लॉक में, आपने फ़ॉन्ट बनाया, अंतर, और चर को सेट करें --फ़ॉन्ट-इंटर. कक्षा का नाम मुख्य तत्व का तब फ़ॉन्ट चर पर सेट किया जाता है और फ़ॉन्ट-बिना. अंतर चर वर्ग लागू करेगा अंतर पृष्ठ पर फ़ॉन्ट, और फ़ॉन्ट-बिना वर्ग डिफ़ॉल्ट सैंस-सेरिफ़ फ़ॉन्ट लागू करेगा।

इसके बाद, आप CSS चर को टेलविंड कॉन्फ़िगरेशन फ़ाइल में जोड़ते हैं टेलविंड.कॉन्फिग.सीजेएस:

/** @प्रकार {आयात ('टेलविंडसीएसएस')। कॉन्फिग}*/
मापांकनिर्यात = {
 संतुष्ट: ["./index.html",
"./src/**/*.{js, ts, jsx, tsx}",],
 थीम: {
 बढ़ाना: {
 फुहारा परिवार: {
 संस: ['वार (--फ़ॉन्ट-इंटर)'],
 },
 },
 },
 प्लगइन्स: [],
}

अब आप का उपयोग करके अपने एप्लिकेशन में फ़ॉन्ट लागू कर सकते हैं फ़ॉन्ट-बिना कक्षा।

फॉन्ट ऑप्टिमाइज़ेशन @next/font के साथ

@next/font पैकेज Next.js में फॉन्ट लोडिंग को अनुकूलित करने का एक सरल और प्रभावी तरीका है। यह पैकेज सुनिश्चित करता है कि आपके कस्टम फोंट कुशलतापूर्वक लोड किए जाते हैं, जिससे आपकी वेबसाइट के प्रदर्शन और उपयोगकर्ता अनुभव में सुधार होता है। यह आलेख इस बारे में जानकारी प्रदान करता है कि कैसे @next/font पैकेज सेट अप करें और अपने Next.js एप्लिकेशन में इसका उपयोग करें। इमेज को ऑप्टिमाइज़ करके आप अपनी साइट के प्रदर्शन को और बेहतर बना सकते हैं।