Up next in 10
Component Level CSS in Next.js _ NextJs Tutorial for Beginners #10
58 views
Feb 13, 2024
In the tenth tutorial video of the series, "Component Level CSS in Next.js," beginners are introduced to the concept of styling individual components in Next.js applications. The tutorial focuses on utilizing Component Level CSS, a method that allows developers to encapsulate styles within specific components, ensuring modularity and maintainability. Viewers will learn how to leverage built-in features of Next.js, such as CSS Modules and Styled JSX, to style their components effectively. Additionally, the tutorial covers best practices for organizing and applying CSS styles at the component level, enhancing the flexibility and scalability of Next.js projects. By mastering Component Level CSS, beginners can create well-structured and visually appealing Next.js applications with ease.
View Video Transcript
0:00
कभी कभी next js application में आप लोग चाहोगी कि यार मेरा एक component है इसकी एक css ह��
0:04
मैं इस component में ये वाली css यूज़ करूँगा और इस component में ये वाली css यूज़ करूँग��
0:11
तो अगर मैं एक component में एक css और दूसरे component में दूसरी css इस्तेमाल करना चाहता हूँ next js के अंद��
0:17
कि मैं कैसे करूंगा यह आप लोगों को इस वीडियो के लिए बताऊंगा क्या strategy रही है कि यह काम करने की और क्यों यह काम मैं करना चाहूंग��
0:24
at the first place चलते हैं computer screen में और इन सारे questions क��
0:27
answer करेंगे let's get started with this video तो यार हम लोगों ने कई चीज़ें देखें अभी तक ठीक ह��
0:41
हम लोगों ने कहा कि या चलो हेट टेंग इस तरह से चेंज किया जा सकता है Next.js की मदद स��
0:46
हमने कहा है एक इमेज को अप्टिमाइज कर लो आज हम लोग देखेंगे CSS जो की एक बहुत इंपोर्टेट चीज ह��
0:51
HTML, CSS, JavaScript से इस विफसाइट बनती है और CSS को किस तरह से manage करेंग��
0:56
इन Next.js के एक बहुत बड़ा impact डालेगी इस framework की popularity पर ठीक ह��
1:00
तो जो CSS manage करने का तरीका है Next.js का वो काफी amazing ह��
1:06
और मैं यहाँ पर open with code पर click करके आप लोगों को दिखाता हूँ कि मेरे कहने का क्या मतलब ह��
1:10
यादे मैंने आप लोग से कहता है कि यार तो रुक जाओ इसको हम लोग discuss करेंग��
1:13
अब वो वक्त आ गया है हम लोग इसको discuss कर रहे हैं class name is equal to style start container ये जो लिखा हुआ है ये क्या कर रहा ह��
1:20
जब हम import कर रहे हैं किसी भी CSS को इस तरह से हम कैसे कर सकते हैं
1:25
एक CSS फाइल से हम इस तरह से import कैसे कर सकते हैं, देखो JavaScript import तो आपको आता होगा
1:30
लेकिन चल क्या रहा है यहाँ पर, यह इस वीडियो में मैं आपको बताऊंगा, देखो यार, Next.js के अंदर क्या होता है
1:34
कि आप component level CSS को इस्तेमाल कर सकते हो, होम मॉड्यूल के लिए यह सीएसस लिख रहे हैं यानि कि इंडेक्स डॉट जीएस के लिए लिख रहे हैं ठीक है तो आ��
1:59
लोग यहां पर देखो कि हमने इसको इंपोर्ट कर लिया स्टाइल्स फ्रॉम यह ठीक है जो भी इसका फाइल पाद है अब ज��
2:04
नेक्स जेस होता है वह इंपोर्टिंग को जावास्क्रिप्ट मॉड्यूल्स की इंपोर्टिंग के बियॉंड लेकर जाता है इंपोर्टिंग क��
2:12
concept को यहां पर नेक्स जेस थोड़ा बहुत मॉडिफाई किया कुछ इस तरह से समझ लो हम इस तरह से यहां प��
2:18
साइड्स को इंपोर्ट कर सकते हैं मैंने इस टाइल इंपोर्ट किया अभी स्टाइल से का ऑब्जेक्ट बन चुका है ठीक ह��
2:23
आपको दिखाता हूं लोगों कंसोल डॉट लॉग स्टाइल करके ठीक है क्या सर्वर चल रहा है चलना चाहिए यार नही��
2:31
चल रहा है तो striking दिखता नहीं है या पर कि क्या चीज कहां पर है मैं यह अंडेव कर लेता हूं यहां प��
2:37
console object print print card code value container value description value home underscore card underscore underscore underscore lpl1 lpl1
3:09
इस फाइल के अंदर नेक्स्ट चेस के पीज के अंदर ठीक है नेक्स्ट चेस के पीज के अंदर एक ऑब्जेक्ट बना दिया जाता है जिसकी कीज होती है यह क्लासेस जितनी भी क्लासेस हमारी सीएसस के अंदर है और वाल्यू होती है एक यूनिक वाल्यू एक ऐसी यूनिक ��
3:39
लो ठीक है अब जब main use होगी तो कौन सी वाली main use होगी इसकी होगी या फिर एक दूसर��
3:44
file जो कि आपने include करी है जिसके अंदर changed values है उसकी होगी तो इस चीज स��
3:49
बचने के लिए यहाँ पर module.css या फिर css modules जिसे कहते हैं वो बनाई जाते हैं ठीक ह��
3:54
अब समझ दो मैं यहाँ पर क्या कहने की कोशिश कर रहा हूँ मैं इसको comment out करूँग��
3:58
अब आप लोग देखो जब मैं class name is equal to styles.container करता हूँ तो behind the scenes
4:04
next.js एक जादू चलाता है और जादू में वो क्या करता है वो कहता है जलो ठीक है तुमारे styles
4:08
कहां से आ रहा है अच्छा यह वाली CSS files आ रहा है जाता है यहाँ पर और तुमने क्योंक��
4:12
styles.container बोला है इसलिए वो क्या करेगा यह सारी की सारी चीज��
4:15
जो की CSS properties है उनको apply कर देगा तो styles.container यह CSS properties
4:22
apply कर देगा ठीक है अब क्योंकि next.js के पास एक जम्मिदारी है कि collision ना हो, collision का क्या मतलब है, मान लो मेरे पास एक home1.module.css होता, दिहान से सुनना, मान लो मेरे पास एक home1.module.css होता, और दूसरा home2.module.css होता, दोनों में मैंने container define किया हुआ है, एक में मैंने container को कर दिया bg red मान लो, ठीक है, अर��
4:54
यहाँ पर मैं copy paste करूँगा कहाँ है styles मेरा home1 कर दिया home1 के अंद��
4:58
अभी डालते हैं home उप्स मैं यहाँ पर क्या करूँगा कि इसको home2 कर दूँग��
5:05
और देख ना यहाँ पर क्या मतलब समझ में आएगा मैं मुझे से बता दूंगा तो वो मजा नहीं आएगा वो ठीक ह��
5:09
और मुझे भी as an instructor मजा नहीं आएगा यार आपको गया क्या कहके चला गय��
5:13
ठीक है समझ लो मेरी बात को अब मैं यहाँ पर क्या करूँगा लिखूँगा .con ठीक है .con लिखूँग��
5:19
और मैं यहाँ पर background color को कर दूंगा red ठीक ह��
5:22
red background red background yellow copy yellow import
5:33
इनको Ctrl D, Ctrl D, Styles 1, Styles 2, Home 1, Home 2
5:38
ठीक है अब ध्यान से देखो मैं यहाँ पर क्या कर रहा हूँ ठीक है, मैं यहाँ पर क्या कर रहा हूँ
5:43
जो मेरा nav bar है, मैं कहूँगा class name is equal to, मैं जरह यहाँ पर क्या करूँगा
5:49
यहाँ blogs में ले लेते हैं यहाँ पर, class name is equal to जो blogs मैंने यहाँ पर इस तरह से लिखा है
5:53
मैं क्या करूँगा, class name is equal to blogs मैंने लिखा है, class name is equal to blogs ना लिखक��
5:57
अगर कुछ इस तरह का काम करूँ मैं दिखाता हूँ आप लोगो किस तरह का काम की बात कर रह��
6:01
मैं कहूँ कहां गया मेरा styles one ठीक है styles one dot blog
6:08
sorry dot con ठीक है अगर मैं ये class name इसको दे दू तब क्या होगा तब क्या background color होग��
6:14
आप लोग बताओ, guess करके, red होगा, obviously, या styles1 में red है, ठीक है, और, अगर मैं यहाँ पर, class name is equal to, मैंने लिखा है, style1.con, अगर मैं इसको styles2.con कर दू, तब क्या होगा, तब yellow हो जाएगा, तो मैं choose कर सकता हूँ, from variety of styles, अब आप एक बात बताओ, जब यह render होगी, यह चीज जब render
6:44
आपको पता है हम टू अंडरस्कोर कॉन लिख दूंगा अगर तो कोलीजिन हो सकता है इसलिए क्या करेगी एक से��
6:49
स्ट्रिंग यहां से एक सेफ यूनिक स्ट्रिंग लगा देगी यहां पर और यह नेक्स्ट की जिम्मेदारी है स्ट्रिं��
6:53
बहुत ही यूनिक होगी कभी भी को लाइट नहीं करेगी समझ रहा था आप मेरी बात को मैं क्या कह रहा हूं यान��
6:57
कि दिक्कत कब होती होम टू अंडरस्कॉर कॉन अगर मैं लिख देता तो कब दिक्कत होती दिक्कत तब होती जब मै��
7:04
multiple styles use करता है, मैं आपको दिखाता हूँ मेरे कहने का क्या मतलब है, अब आप लोग यहाँ पर देखो, मैंने लिखा class name is equal to styles2.con
7:11
मैं क्या करूँगा, यहाँ पर एक template literal का इस्तेमाल करूँगा, मुझे पता है थोड़ा सा कहीं ना कहीं, advanced भी नहीं कहूँगा
7:19
लेकिन हाँ मैं कहीं न कहीं थोड़ा सा advance जा रहा हूँ ठीक है और ये पूरा javascript
7:23
है तो इसके लिए एक एक curly bracket समझ जो देखो य��
7:27
curly bracket मैंने javascript के लिए लगाया ये template literal के अंदर के variable के लि��
7:31
लगाया मैं इसे copy करूँगा और space देकर यहाँ पर styles 1.con
7:35
और styles2.con दोनों apply कर दूँगा अब save करके मैं आपको दिखाता हू��
7:39
आप देखो home1 underscore con underscore underscore ggz jmb आ गया और ये भी आ गय��
7:45
दोनों आ गयी ठीक है दोनों styles हमारे यहाँ पर आ चुके हैं अब अगर कहीं और से home1 underscore con
7:50
या home1 या home2 underscore con आ रही है अगर कहीं से भी home1 underscore con class
7:56
या home2 underscore con class आ रही है तो यहाँ पर ये names
8:00
collide नहीं करेंगे क्योंकि ये names next.js ने automatically change कर दिये ह��
8:05
समझ रहे हो आप लोग multiple classes apply next
8:17
जो रायता फैलाया मैंने, जो रायता फैलाया मैंने, इसको जस्ट फॉर द सोर्स कोड मैं यह रहने दूंगा इस कमेंट को फ्यूचर में इस कमेंट को मैं हटा दूंगा ठीक है तो और यह मै��
8:24
क्लास ने में हटा देता हूं भी यहां से कि मुझे नहीं लगता है पर सीएसस अप्लाई हो भी दिए ठीक है हम करेंगे आग��
8:29
करेंगे सब कुछ करेंगे लेकिन अभी के लिए अप्लाई शायद नहीं हो रही है तो मैं इसको ऐसे रहने दूंग��
8:33
ठीक है और यह दोनों इंपोर्ट्स भी हटाना चाहूंगा अभी के लिए कमेंट आउट करूंगा आने वाले वीडियोस मे��
8:38
लाइट दूंगा � standard और आपको सारा सोस्ट तो मिली रहा होगा गिट आपके थ्रू तो कोई प्रॉब्लम नहीं है और य��
8:42
मॉडियोस को भी में डिलीट कर दूंगा बाद में अभी के लिए रख लेता हूं अभी इस पर्टिकुलर कमेंट में डालूंगा औ��
8:48
आपको get नहीं आता तो कोई tension नहीं है और एक और बात जो बता रहा हूँ वो भी ध्यान से सुनन��
8:51
देखो CSS किस तरह से काम कर रही है नेक्स जिस में इसकी समझ होना बहुत जरूरी ह��
8:56
लेकिन अगर आप लोग को यह पूरी की पूरी चीज ओवरवेल्मिंग लगती है
8:59
आप कहते हो यार यह क्या चल क्या रहा है, क्या चल रहा है, मुझे तो, मुझे तो कुछ समझ ही नहीं आ रहा है
9:03
अगर आपको ऐसा लग रहा है, तो मैं आपको बताता हूँ, आप styles को इस तरह से import कर सकते ह��
9:08
और उसके बाद आपको simply लिखना है styles. ठीक है या फिर आपने यहाँ पर जो भी लिखा है वो dot
9:13
और उसके बाद class का नाम आप डाल दो इस तरह से आप इसको as a pattern समझ जा��
9:18
इसको as a template देख लो किस तरह से use करना है और आपका काम हो जाएगा ठीक है रुकना मत लेकिन इस वज़ास है रुकना मत ये म��
9:25
सोचना कि यादी तो मुझे आता ही नहीं है मैं मैं तो यहां से आगे बढ़ी नहीं सकता मुझे तो समझ ही नहीं आ रहा कि ये जो collision हो रहा है व��
9:31
क्यों नहीं होगा और क्या आपको समझने की जरूरत नहीं है मैं थोड़ा बहुत आप लोगों को समझाने की कोशिश कर रहा थ��
9:36
कि Next.js में जो चीज़ें इस तरह से बनाई गई हैं वो क्यों बनाई गई है ठीक है, समझ जाओ, और जादा कोई लंबी चौड़ी चीज नहीं है
9:42
ये simply यापर जो home1 underscore, con underscore, underscore करके जो add करा था next.js ने, व��
9:47
behind the scenes करा था, वो क्यों करा था, और क्या करा था, ये आपको जानने की जरूरत नहीं है
9:52
next.js को use करने के लिए, आप लोग अब भी सिंपली यह बात समझ कर यूज कर सकते हैं कि स्टाइल को ऐसे इंपोर्ट करना है और ऐसे यूज करना ह��
9:59
देट्स अबॉट इन पर सितना सीखना आपको और इसके अलावा अगर आप लोगों को और चीज समझ में आ गई तो वह बोन��
10:04
ठीक है, next.js को use करने के लिए सिर्फ इतना ही चाहिए, यह बात आप लोगों को समझने की बहुत जादा ज़रूरत है भी
10:09
क्योंकि बहुत सारे लोगों को मुझे पता है, यह सारी चीज़े cuestión लगेंगी, और मेरी भी आदत है कि मैं कहीं ना कहीं डिटेल्स में चला जाता हू��
10:14
कभी कभी अभी के लिए यहाँ पर देखो कि यह ब्लॉक कुछ इस तरह से दिख रहा ह��
10:19
हमने लिंक्स वगैरा बना दी है लेकिन अभी भी बहुत सारा काम यहाँ पर बाखी है ठीक है तो I hope कि आप लोगों ने ये जो playlist ह��
10:24
इसको जरूर access कर लिया होगा इसको access जरूर कर लेना और उसी के साथ सा��
10:28
आप लोग इसको bookmark कर लेना क्लिक करके और यहां क्लिक करके save भी कर लेना अभी के लि��
10:32
इस वीडियो में इतना है guys thank you so much guys for watching this video and I will see you
10:36
next time करते है��