Up next in 10
Displaying Navbar on all pages _ NextJs Tutorial for Beginners #14
33 views
Feb 13, 2024
In the fourteenth tutorial video titled "Displaying Navbar on all pages," beginners are provided with guidance on how to create a consistent navigation experience across all pages of a Next.js application. This tutorial demonstrates how to implement a navbar component that remains visible and accessible throughout the entire website. Viewers will learn how to create a reusable navbar component, integrate it into the layout of their Next.js project, and ensure it is displayed on every page using layout components or global styles. By following the instructions in this tutorial, beginners can enhance the usability and navigation of their Next.js applications, providing users with a seamless browsing experience across all pages.
View Video Transcript
0:00
अभी तक हमारा navbar सिर्फ home page पर दिखा ही पड़ता ह��
0:02
हम लोग अगर about page पर जाएं, contact page पर जाएं या फिर blog post वाले page पर जाए��
0:07
तो वहाँ पर हमें navbar नहीं देखने को मिलता है क्या हमें navbar बार-बार copy करना पड़ेगा इन सारे pages मे��
0:12
और सारे blog post में अगर ऐसा होगा तो बहुत ही cumbersome हो जाएगा और बहुत ही problem होग��
0:16
लेकिन luckily next.js के अंदर आप लोग underscore app.js नाम की file को edit कर सकते ह��
0:21
क्या होती है यह file इससे क्या होता है क्यों इसको edit करना चाहिए और किस तरह से हम लोग और pages में भी nav bar को display करा सकते है��
0:29
यह सीखने वाले हैं आज के इस लेसन में हम लोग चलते हैं कंप्यूटर स्क्रीन के अंदर और देखते हैं क��
0:33
साइड चीज है नेक्स जीएस के अंदर किस तरह से कि जाती है तो यार हमारे हंटिंग पोड़ों को दुबारा से खोलूं तो मैं आप राइट क्लिक करके ओपन विद कोड करूंगा और यहां पर मैं क्या करूंगा य��
0:53
अपने प्रदेश ने के बाद मेरा सर्वर स्टार्ट हो जाएगा और मुझे बताएगा आप लोग इसलिए आगे आगे फोर्स में क्यो��
0:59
हम बार-बार यह काम कर रहे हैं आज एस वांट टू एक्सप्लेंड इस थिंग इसलिए मैं कर रहा हूं बार-बार और आज के इ��
1:05
यहां पर अगर आप लोग पेजेस में देखोगे अगर आप लोगों ने मेरे साथ फॉलो करते हुए इस कोर्स में आगे बड़े हैं तो आपके पास एक अंडरस्कोर आप डॉट जेस नाम की जो कोई प्रकार देखेंगे और यहां पर अगर आप लोग पेजेस में देखोग��
1:35
आपकी फाइल होगी यह फाइल आपकी पेजेस डिरेक्टरी के अंदर होगी इस अंडरस्कोर एप डॉट जेस फाइल के अंद��
1:43
आपको कुछ इस तरह का कंटेंट देखेगा यहां पर ग्लोबल सीएसस भी हमने इंपोर्ट करी हुई है यहां पर आ��
1:48
Z CSS
2:07
ग्लोबल सीएसस यहां पर इंपोर्ट होती है तो वो सब चीजें कैसे काम करती है ठीक है अब यहां पर फंक्शन देख��
2:12
my app और ये export कर रहा है my app को जो next.js की working
2:17
यानि की internal working next.js का code कैसे काम करता है उसकी detail में ह��
2:20
नहीं जाएंगे लेकिन मैं आप लोगों को बताना चाहता हूँ कि underscore app.js
2:24
एक ऐसी file है जो कि आप कोई सा भी page load करो वो जरू��
2:28
fire की जाती है यहाँ पर जो return component है ये pages के अंदर हमन��
2:32
component बनाये है वो वाला component होता है जैसे कि मैं यहाँ पर console.log
2:36
करूँ console.log I am loading ठीक है मालो मैं यह लिखता हूँ I am loading
2:42
और मैं आप लोग को यहाँ पर जो है console दिखाता हूँ तो देखो अगर मैं इसको reload करू��
2:46
page को तो I am loading दिख रहा है क्या मैं about पर जाओंगा तब भी I am loading दिखेगा हाँ दिखेग��
2:50
back आउँगा फिर से I am loading contact में जाओंगा फिर से I am loading यानि कि कोई भी page open ह��
2:56
underscore app.js जो है यह वाली file execute होती है और यह वाला जो component है और props यह इस तरह स��
3:03
execute किये जाते हैं, अब ये काम कैसे करता है इसकी detailing को समझने के चक्कर मे��
3:07
अगर आप लोग पढ़ोगे, तो आप लोग थोड़ा सा भटक जाओगे, हमारा जो अभी यहाँ पर goal ह��
3:11
वो है next.js को सीखना, और इससे useful applications बनाना, हम बढ़िया से बढ़िय��
3:15
applications बना पाएं चीजों को समझते हुए यह हमारा goal है ठीक है तो यहाँ पर मैं क्या करूँगा कि य��
3:21
return सिर्फ इतना नहीं करूँगा मैं कहूँगा यार तुम सिर्फ component को return मत करो यार my app my app तु��
3:26
इसको component को सिर्फ return मत करो my app तुम एक काम करो my app तुम इस fragment को return करो ठीक ह��
3:33
इसको जरा कट करता हूं और मैंने फ्रेगमेंट क्यों बनाए मैंने इस फ्रेगमेंट डिसली बनाया ताकि मै��
3:38
इसके अंदर और चीजों को भी रिटर्न कर सको यहां पर इस टेंट के साइड में लेकर जाऊंगा ताकि रिटर्न ह��
3:43
अब इसके अंदर मैं कुछ भी डाल सकता हूँ मालो मैं आपको कुछ इस तरह से डालता हू��
3:47
मैं कहूँगा या डिव यहाँ पर amat नहीं चल लिया है javascript react javascript react div iamadiv I am a div I am a div pages I am a div
4:03
about में जाऊँगा I am a div, और this is my about component, जो की हमारा component है
4:07
ब्लॉग में जाऊँगा I am a div, मैं आए मैं डिव नहीं दिखाना चाहता, मैं नैव बार दिखाना चाहता हूँ, ठीक है
4:12
तो मैं आओंगा अपनी index.js के अंदर, जिसके अंदर मैंने नैव बार already इंट्रूट किया हुआ है
4:17
और यहाँ से नैव बार को हटाकर, मैं क्या करूँगा, तो यहां पर यह जो डिव नाव बार है यह ना रिटर्न करते हुए मैं क्या करूंगा यह वाला नाव बार रिटर्न करूंगा तो यह जो कोड है इसको ऐसे कट करूंगा कॉपी भी नहीं करूंगा कट करूंगा और index.js को सेव कर लूँगा और यहां पर इसको पेस्ट कर द��
4:50
देखो कि नेव बार यहां से गायब हो चुका क्योंकि मैंने वहां से कट कर दिया अभी जो आयम है डिव है ना इसको मैं नेव बार से रिप्लेज करूँगा और आप लोग देखने काम मैं कैसे करूँगा मैं यहाँ पर नेव बार को कुछ इस तरह से यूज करूँगा ठीक ��
5:20
from components Navbar ठीक है तो यहां पर अगर मैं आप लोगों को अपना पेज दिखाऊं तो यहां पर स्टाइल्स नॉट डिफाइन्��
5:25
ओके स्टाइल्स नॉट डिफाइन्ड सही कह रहा है यहां पर मुझे स्टाइल्स को दुबारा से इंपोर्ट करना पड़ेगा क्योंकि मै��
5:31
यहाँ पर मैं स्टाइल्स को यूज कर रहा हूं ठीक है कहीं ना कहीं मुझे नबरोट मॉडिल और सीएस बना लेन��
5:36
चाहिए था बट टैट्स फाइन मैं यही वाले स्टाइल्स को यहां पर इंपोर्ट करूंगा और आप लोग देखो यहा��
5:41
लिंक इस नोट डिफाइन तो सारी चीजें इंपोर्ट करनी पड़ेंगी यहाँ पर से लिंक और स्क्रिप्ट दोनों की जरूर��
5:47
script external script load about nav nav
6:03
हमारे कंसोल में कोई भी एरर नहीं होना चाहिए जब हम लोग काम कर रहे हैं अपनी अप्लीकेशन के सा��
6:08
तो ठीक है तो यहाँ पर आप लोग ब्लॉग पर गए हम कॉन्टैक्ट पर गए अब आउट पर गए होम पर गए और बिल्कुल सह��
6:14
चल रही है अप्लीकेशन हमारी ठीक है तो आई होब कि आप लोग को मजा आया यहां पर अब आउट जो है इस पेज क��
6:19
था था थोड़ा सा थोड़ा सा बहुत ज्यादा भी नहीं करूंगा थोड़ा सा इस पास बनाना चाहता हूं ठीक है और इसमे��
6:25
कुछ अब आउट डालना चाहता हूं तो मैं काम करता हूं आप लोग एक टास्ट देता हूं कि आप अब आउट पेज खुद स��
6:29
करें ठीक है मैं अब designing नहीं करवाना चाहता course में time waste नहीं करना चाहता तो यह आ��
6:35
लोग खुद से कर लेना ठीक है लेकिन यह जो home page है यह मेरा ऐसी रहने वाला है और यहां पर मैं क्या करूँग��
6:40
लिंक करूंगा ब्लॉग्स को सारे के सारे ब्लॉग्स जो हमारे पॉपुलर ब्लॉग्स होंगे या फिर टॉ��
6:44
थ्री ब्लॉग्स होंगे वो यहाँ पर मैं लिखूंगा लेटेस्ट लॉक्स या पॉपुलर ब्लॉग्स मैं लेटेस्��
6:49
ब्लॉक कर देता हूँ उसको ठीक है कुछ भी कर सकते हो दाट्स दाट्स एडिजाइन चॉइस ठीक है मैं लेटेस्ट ब्लॉ��
6:55
कर देता हूँ और यहाँ पर लेटेस्ट ब्लॉक सब देखने को मिलेंगे ठीक है तो मैं क्या करूंगा कि अगर कही��
6:59
database से लेकर आ रहा हूँ data को तो वहाँ से fetch करूँगा और कहूँगा कि यार जो हमारे top 3 ह��
7:03
वो यहाँ पर display करा दिये जाए ठीक है तो ये हो गया हमारा home page about page तो आप लो��
7:09
बनाई लोगे यार contact page मैं बनमाऊंगा आप लोगों को तो आप लोग जो है थोड़ा सा wait करो हम लोग पहल��
7:14
ब्लॉग की functionality को finish कर लेते हैं उसके बाद आप लोग देखना हम लोग contact page भी बनाएंग��
7:18
I hope की मज़ा आ रहा है आप सब लोगों को और उसे के साथ साथ आने वाले वीडियो मे��
7:22
आप लोग ज़रूर से देखना है हम किस तरह से ब्लॉग और ब्लॉग पोस्ट बनाने वाले है��
7:26
नेक्स जियर्स की प्लेलिस्ट को ज़रूर से अक्सेस कर लेना बहुत साथ important है, अब ये के लिए इस वीडियो में इतना है guys, thank you so much guys for watching this video, and I will see you next time