स्टोरीबुक अलगाव में यूआई घटकों के निर्माण के लिए एक शक्तिशाली उपकरण है। यह संपूर्ण एप्लिकेशन को चलाए बिना घटकों को बनाने और उनका परीक्षण करने में आपकी सहायता करता है।

यदि आपने कभी नेक्स्ट.जेएस के साथ स्टोरीबुक का उपयोग किया है, तो आप देखेंगे कि सीएसएस और छवियों को ठीक से संभालने के लिए आपको इसे कॉन्फ़िगर करने की आवश्यकता है। प्रक्रिया निराशाजनक हो सकती है लेकिन ये सरल कदम आगे बढ़ने में मदद करेंगे।

Next.js प्रोजेक्ट सेट अप करके प्रारंभ करें

यदि आपके पास पहले से कोई Next.js प्रोजेक्ट सेट अप नहीं है, तो अधिकारी का अनुसरण करें अगला.जेएस एक नई परियोजना बनाने के लिए प्रारंभ करना मार्गदर्शिका।

स्टोरीबुक को इनिशियलाइज़ करें

स्टोरीबुक को इनिशियलाइज़ करने के लिए टर्मिनल में निम्न कमांड चलाएँ।

एनपीएक्स एसबी init --बिल्डर वेबपैक5

यह आदेश उस प्रोजेक्ट का पता लगाता है जिस पर आप काम कर रहे हैं, सभी आवश्यक पैकेज स्थापित करता है, और उदाहरण कहानियां बनाता है।

सीएसएस सेट अप करें

पहली चीज़ जो आपको करने की ज़रूरत है वह है पूर्वावलोकन.जेएस में वैश्विक सीएसएस फ़ाइल को शामिल करना।

वैश्विक शैलियाँ सेट करें

वैश्विक शैलियाँ संपूर्ण एप्लिकेशन पर लागू होती हैं। इन शैलियों को कहानियों में लागू करने के लिए, आप फ़ाइल को अलग-अलग कहानियों में आयात कर सकते हैं और यह काम करेगा। हालाँकि, आप कई कहानियों में आयात विवरण को फिर से लिखना या भूल जाना भी समाप्त कर देंगे।

instagram viewer

एक बेहतर समाधान वैश्विक शैलियों को .कहानी की किताब/पूर्वावलोकन.js फ़ाइल, एक फ़ाइल जिसमें स्टोरीबुक के सभी साझा कॉन्फ़िगरेशन हैं।

.storybook/preview.js के शीर्ष पर, निम्न आयात विवरण शामिल करें।

आयात "../styles/globals.css";

नेक्स्ट.जेएस में स्टोरीबुक के लिए सैस सेट अप करें

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

एनपीएम आई-डी स्टाइल-लोडर सीएसएस-लोडर सैस-लोडर

यहाँ ये पैकेज क्या करते हैं:

  • स्टाइल-लोडर CSS को DOM में इंजेक्ट करता है।
  • css-loader @import और URL() जैसे आयात/आवश्यकता की व्याख्या करता है और उन्हें हल करता है।
  • sass-loader SCSS को CSS में लोड करता है।

इन पैकेजों को कॉन्फ़िगर करने के लिए, निम्न कोड को .storybook/main.js में जोड़ें:

कॉन्स्ट पथ = ज़रूरत होना('पथ');
मापांकनिर्यात = {
// अन्य विन्यास
 वेबपैक फाइनल: async (विन्यास) => {
 कॉन्फ़िग.मॉड्यूल.नियम.पुश (
 {
 परीक्षा: /\\.s(a|c)ss$/,
 शामिल करें: पथ.संकल्प (__dirname, '../'),
 उपयोग: [
 'शैली लोडर',
 {
 लोडर: 'सीएसएस-लोडर',
 विकल्प: {
 मॉड्यूल: {
 ऑटो: सत्य,
 स्थानीय पहचान नाम: '[नाम] __ [स्थानीय] - [हैश: बेस 64:5]',
 },
 },
 },
 'सास-लोडर'
 ],
 },
 );
वापस करना विन्यास;
 }
}

इसके बाद, सास स्टोरीबुक में उपलब्ध होना चाहिए।

Unoptimized Prop को Next.js छवियों पर लागू करें

Next.js में कई अनुकूलन सुविधाएँ हैं। उनमें से एक छवि घटक के माध्यम से छवि अनुकूलन है जो छवियों को तेज़ी से लोड करता है और स्क्रीन के अनुकूल बनाता है। हालाँकि, स्टोरीबुक में काम करना एक दर्द है क्योंकि स्टोरीबुक नेक्स्ट.जेएस वातावरण से अलगाव में चलती है। कहानियों में छवियों को डी-ऑप्टिमाइज़ करना बेहतर है।

आरंभ करने के लिए, आपको यह इंगित करने के लिए कि चित्र कहाँ स्थित हैं, स्टोरीबुक में सार्वजनिक निर्देशिका की सेवा करने की आवश्यकता है। में कर सकते हैं एनपीएम स्क्रिप्ट्स मानचित्र में पैकेज.जेसन फ़ाइल या में .स्टोरीबुक/मेन.जेएस.

में पैकेज.जेसन, सार्वजनिक निर्देशिका की सेवा के लिए स्टोरीबुक स्क्रिप्ट को अपडेट करें।

"लिपियों": {
"कहानियों का संग्रह": "स्टार्ट-स्टोरीबुक -p 6006 -s ./public",
"बिल्ड-स्टोरीबुक": "बिल्ड-स्टोरीबुक -s public"
}

वैकल्पिक रूप से संशोधित करें ./स्टोरीबुक/मेन.जेएस स्थिर निर्देशिका शामिल करने के लिए, जो इस मामले में सार्वजनिक फ़ोल्डर है।

मापांक.निर्यात = {
// अन्य विन्यास
"staticDirs": [ "../जनता" ],
}

सार्वजनिक निर्देशिका की सेवा के बाद, कहानियों में उपयोग की जाने वाली नेक्स्ट.जेएस छवियों पर अडॉप्टिमाइज़्ड प्रॉप लागू करें।

.storybook/main.js में, निम्न कोड जोड़ें:

आयात * जैसा अगली छवि से "अगली / छवि";
कॉन्स्ट ओरिजिनल नेक्स्टइमेज = नेक्स्टइमेज।गलती करना;
वस्तु.defineProperty (अगली छवि, "गलती करना", {
 विन्यास योग्य: सत्य,
 मूल्य: (सहारा) => (
<ओरिजिनल नेक्स्ट इमेज
 {... सहारा}
 अनुकूलन-रहित
 />
 ),
});

यह कोड अडॉप्टिमाइज्ड प्रोप का उपयोग करता है जहां छवि घटक का उपयोग किया जाता है।

Next.js में स्टोरीबुक का उपयोग करना

स्टोरीबुक उन उपकरणों में से एक है जो आपको लगता है कि उपयोग करने के लिए बहुत कठिन हैं लेकिन एक बार जब आप उनका उपयोग करना शुरू करते हैं, तो आपको एहसास होता है कि आप क्या खो रहे थे। स्टोरीबुक के साथ, आप अपना पूरा एप्लिकेशन चलाए बिना विभिन्न घटकों का निर्माण और परीक्षण कर सकते हैं। इसलिए, यह निर्माण घटकों को शुरू से ही सरल बना देता है।

यदि आप Next.js का उपयोग कर रहे हैं, तो शुरू करने से पहले सुनिश्चित करें कि आपने CSS को कॉन्फ़िगर किया है और छवियों को डी-ऑप्टिमाइज़ किया है।