Up next in 10
Adding Global Styles in Next.js _ NextJs Tutorial for Beginners #11
18 views
Feb 13, 2024
In the eleventh tutorial video titled "Adding Global Styles in Next.js," beginners are guided through the process of incorporating global styles into Next.js applications. This tutorial demonstrates how to define and apply global CSS styles across all pages and components within a Next.js project. Viewers will learn various methods for adding global styles, including importing external CSS files, using global CSS modules, or leveraging the built-in Styled JSX feature. The tutorial also covers best practices for organizing global styles and managing global CSS variables. By mastering the techniques presented in this tutorial, beginners can ensure consistency and coherence in the visual presentation of their Next.js applications.
View Video Transcript
0:00
याद है वो हमारी पहली next application
0:01
जो कि हमने create next app की साइता से बनाई थी उसके अंदर आपने CSS modules देखे होंग�
0:07
अगर आपने नहीं देखे तो आप या तो पुराने वीडियो में जाके देख लेना है या खुद से एक नहीं next app बना कर देखन�
0:12
कुछ CSS modules होते हैं और उन modules के अंदर की classes को इस्तेमाल किया जाता ह�
0:17
वो जो हमारा next.js का homepage होता है उसके अंदर क्या हम वो काम अपने custom components में कर सकते है�
0:22
absolutely yes हम कर सकते हैं हम CSS लिख सकते हैं और उनको इस्तेमाल कर सकते है�
0:27
अपनी next.js application के अंदर किस तरह से structure करना है CSS क�
0:31
कहाँ पर किस तरह से कौन सी class को इस्तेमाल करना है इस वीडियो के अंदर आप लोगों को बताओंगा क्या आपकी strategy होनी चाहिए CSS को लेकर अपनी next.js website के अंद�
0:40
और हाँ मैं अपने उसी ब्लॉग का एक्जामपल लेकर आपको बताओंगा hunting coder को हम लोग continue करेंग�
0:45
क्योंकि यार उसको हमें awesome बनाना है उसको ले कर जाना है conclusion तक एक बहुत बढ़िया blog बनाना है एक profitable blog बनाना है चलते हैं computer screen में और हम लोग वहाँ पर इन सब concepts को देखेंग�
0:57
पिछले वीडियो में हम लोगों नहीं देखा था किस तरह से हम लोग modules को use कर सकते है�
1:10
हमने यह देखा था कि home.module.css अगर हमने file name को .module.css में end किय�
1:16
तब हम लोग इसको कैसे as a module use कर सकते हैं आज मैं क्या करने वाला हूँ, आज मैं आपको को यह दिखाने वाला हूँ, कि किस तरह से, जैसे हम लोग style sheet add करते हैं, वो कैसे करेंगे, यह चीज मैं आपको आज बताने वाला हूँ, जैसे मान लो आपके वास एक CSS style sheet है, आपने लिखी है, मान लो मैं एक style.css बनाता हूँ
1:49
ठीक है by the way by the way मैं यान रन कर लूंगा मैं यान रन क्यों लिखता हूँ यार बार-बार मतलब नहीं मेर�
1:58
style sheet add add index server
2:15
कि यार किस तरह से मैं modules को add कर सकता हूँ ठीक है ये तो हमारा एक तरीका थ�
2:19
CSS यूज़ करने का कि हमने module को import किया ठीक है styles में एक object आ जाएगा उस object क�
2:25
कुछ इस तरह से use किया जा सकता है बढ़िया आपने का बढ़िया हाँ बढ़िया अ�
2:28
अब यहाँ पर मैं चाहता हूँ कि मैं just एक CSS file import करन�
2:33
चाहता हूँ style.css ठीक है वो मैं कैसे करूँगा मैं को जिस तरह से import करना चाहता हू�
2:38
मैं कहूँगा styles में से बस मुझे style.css styles.css import करना ह�
2:43
style.css है क्या मुझे बस यह import करना है that's about it
2:48
मुझे ज़ादा कुछ और लंबी चौड़ी चीज़ नहीं करनी है मुझे बस यह import करना ह�
2:51
तो मैंने यहाँ पर कुछ तो कर दो कर दो यह स्टाइल्स और स्टाइल्स के बाद स्टाइल और सीएसस ठीक है स्टाइल और सीएसस यहा�
2:58
एक error देखने को मिल रहा है global CSS cannot be imported from files other than your custom app
3:04
तो एक error मुझे देखने को मिल गया और यह error मुझसे क्या कह रहा है यह कह रहा है यार देखो next.js वाले मुझसे क्या कह रहे है देख�
3:10
कह रहा है यार देखो भाई ऐसा है ना कि आप ना CSS modules use कर ल�
3:14
अगर global styles यूज़ करना चाते हो आप, अगर आप कुछ ऐसा चाते हो कि आप global styles यूज़ करो
3:18
तब आप कुछ इस तरह से यूज़ कर सकते हो, यहाँ पर, app underscore app.js के अंदर
3:24
यहाँ जो भी import करोगे, वो global style sheet आपकी बन जाएगी, ठीक है, वो आपकी global style sheet बन जाएगी और वो हर page के साथ फिर आपके import हुआ करेग�
3:32
लेकिन मैं कह रहा हूँ नहीं यार मैं चाहता हूँ कि style.css बस में index.js page पर आ जा�
3:36
मैं क्या करूँ तो अगर आप लोग चाहते हो कि इस तरह से styles को add कर ल�
3:40
तो आप नहीं कर सकते, node modules से लेकिन आप लोग styles को add कर सकते हो
3:45
अब आप में से के लोग confused हो जाओ, क्या node modules में से क्यों कर सकते हैं, यहाँ से क्यों नहीं कर सकते हैं
3:49
यहाँ पर देखो, importing a CSS file from node modules is permitted
3:53
ठीक है, तो यह बात याद रखना, कभी भी आपने कोई ऐसा package install किया हो जो कि आप लोगों को CSS देता ह�
3:57
जैसे कि बालो bootstrap आपने install किया हो और उसकी CSS आपको import करनी ह�
4:01
सिर्फ एक component में आप कर सकते हो उसके अलावा आप लोग अगर CSS लिख रहे ह�
4:06
तो कहा ये जाता है कि इस तरह से मत लिखो आप वो जो CSS ह�
4:10
CSS modules use I hope import underscore app dot app dot JS save app dot JS
4:23
देता हूँ अब आपने सभी लोग कहोगे कि यार यह app dot JS क्या है इसके बारे में हम लोग आगे डिटेल में बात करेंग�
4:28
लेकिन अभी के लिए आप कुछ ऐसा समाझ लो कि यहाँ से ही आपक�
4:32
कोई भी page अगर आप लोड करोगे next.js app का तो वो यहाँ से ह�
4:36
लोड होता है ठीक है यानि कि अगर मैं यहाँ पर लिख दू console.log
4:40
और मैं यहाँ पर लिख दूंगा आई एम अंडर स्कोर आप डॉट जस ठीक है मान लो मैं यह लिख देता हूं तो अगर मै�
4:47
एडोट नूझे सर्वर डिस्टार्ट करना पड़ेगा कि नहीं यह कंसोल लॉक का मैसेज देखने के लिए लेकिन आप लोग देख सकत�
4:53
आ रहा है iamapp.js और ये css file भी import हो गया जब मैं about में चाहूँगा तो भी मुझे red दिख रहा है background और iamapp.js फिर से दिख रहा है ठीक है मैं back करूँगा और ये बहुत घटिया दिख रहा है मुझे मालूम है but I just wanted to show you कि ये कैसे काम करता है हमने देखा था कि links की साहिता से हम लो�
5:23
रिलोड करूँ और मैं clear कर दूँ अब मैं navigate कर रहा हूँ about में तो आप देखो सिर्�
5:27
इतना data load किया गया सिर्फ इतना data load किया गया इस data का size क्या था अ�
5:32
दोस्तो 13 bytes दोस्तो 13 bytes बस और 3 kilobytes 3.8 kilobytes ठीक है तो अराउं�
5:38
चार किलो बाइट्स में कह सकता हूँ कि आया डेटा मेरा जो की आउसम है यार जड़ा सोचो जब मैं इसको पूर�
5:43
रिलोड करता है अगर अब वोट कंपोनेंट को कितना सारा डेटा आता आप खुद ही देखो यार फोर्टी सेवन किल�
5:48
बाइट्स तो अकेला यह वाला है ठीक है और कहां आपका चार किलो बाइट्स में काम हो रहा है तो है ना फास्�
5:53
जैसे इसीलिए नेक्स जैसे को इस्तेमाल किया जाता है नेक्स जैसे के अंदर लिंक कंपोनेंट इसीलिए होत�
5:58
confusing css use beginners css use module concept natural
6:50
pages है उसके अंदर load हो तो आप लोग क्या करोगे कि यहां पर डालोगे underscore app.js मे�
6:56
अब ये file क्या होती है क्यों होती है कैसे होती है उसके बारे में बात आगे होगी बट आप लोग यहां पर डालोगे मैं एक console log का message यहां पर comment out कर दूँग�
7:02
इसके बाद हम क्या करेंगे कि index.js के अंदर कोई भी module अगर हमने import करा ह�
7:09
तो वो index.js के अंदर ही use होगा ठीक है तो हम क्या करेंगे कि .module.css में end करेंगे अपनी css file क�
7:15
और यहाँ पर styles में डाल देंगे और इसको कुछ इस तरह से use करेंगे सबसे पहले import styles करके ऐसे कर लेंग�
7:20
और ये करने के बाद हम लोग class name is equal to इस तरह से use कर सकते है�
7:24
ठीक है, I hope कि ये चीज भी आपको समझ में आ गई है, तो कभी भी component
7:28
level CSS लिखना है तो CSS module की साइटर से लिखेंगे, और कभी भ�
7:32
हम लोगों को global CSS लिखना है तो हम यहाँ से करेंगे ठीक है कहाँ से करेंगे underscore app.js से करेंगे ठीक ह�
7:37
यहाँ पर add करेंगे global CSS को बड़ अगर आप लोग tailwind CSS यूज़ करोग�
7:41
जो की मैं mostly करता हूँ तो उसका configuration अलग होता है वो भी हम आगे देखेंगे आने वाले videos मे�
7:45
लेकिन pure CSS किस तरह लिखनी है I hope कि आप लोगों समझ में आ गया होग�
7:49
global यहाँ पर डाल देना file simply वो सारे pages में include हो जाएगी और local के लिए कुछ इस तरह से आपको करना होग�
7:55
modules बनाने पड़ेंगे और class names को इस तरह से use करना पड़ेगा I hope that you guys are enjoying this course
8:00
and you understood what I told you in this video I hope that you guys have also accessed this playlist
8:04
you can click here and bookmark it and click here and save the playlist
8:09
that's all for now in this video thank you so much guys for watching this video
8:13
and I will see you next time करते है�