Creating Multiple Pages in Next.js _ NextJs Tutorial for Beginners #8
45 views
Feb 13, 2024
The eighth tutorial video in the series, "Creating Multiple Pages in Next.js," focuses on guiding beginners through the process of building a multi-page Next.js application. Viewers learn how to create additional pages within their Next.js projects and set up navigation between these pages using Next.js routing features. The tutorial covers essential concepts such as creating new page components, defining routes using file-based routing, and linking between pages using Next.js' `<Link>` component. By following along with this tutorial, beginners gain a solid understanding of how to structure and navigate between multiple pages in Next.js, enabling them to create more complex and dynamic web applications.
View Video Transcript
0:00
� 살i देखो हम बना रहे हैं ब्लॉग और इस ब्लॉग के अंदर वने वाले हैं बहुत सारे ब्लॉग पोस्ट और हम चाहत�
0:05
हैं कि यूजर अलग-अलग लिंक के थूप हमारे पेज पर आए उसी के साथ हम कुछ एक्स्ट्रा पेज बनाना चाहते हैं जैस�
0:12
एक contact पे शायद हम मनाना चाहें, शायद एक about page हम मनाना चाहें, अगर आप लोग चाहें, तो एक custom services page भी add कर सकते हैं, अगर आप लोग इस blog के थूँ services deliver करना चाहते हैं, मान लिजे कि आप अपने blog के थूँ content writing की services provide करते हैं, let us say आप अपने blog के थूँ कोई समान बेचना चाह�
0:42
किस तरह से next.js में बनाना है ये मैं आप लोगों बताने वालों उस वीडियो के अंद�
0:46
और क्यों आप लोग जो आपके blog post हैं उनको hard code नहीं करेंग�
0:50
आप लोग चाहें तो hard code कर सकते हैं मैं आप लोगों को बता दूं क्यों hard code नहीं करना ह�
0:54
मानिजिया आपने एक ब्लॉग लिखा आपने शायद उसको hard code करके लिख दिया आपने javascript code लिखकर उसको jsx लिखकर आपने pages folder के अंदर डाल दिय�
1:02
दूसरा भी आपने कर दिया तीसरा भी कर दिया क्या आप बार बार code change करके अपने blog post को upload करोग�
1:08
obviously not, इसका एक अच्छा तरीका होगा जो कि हम आने वाले time में देखेंग�
1:12
but अभी हम लोग configure करेंगे अपने block के पूरे structure क�
1:16
कि किस तरह से, किस link पर जाकर हमें कौन सा page दिखने वाला ह�
1:21
ये काम react में आप लोग react router dom की साहिता से करते थे अगर आप लोगों को याद हो तो हमने react का जो course थ�
1:27
अगर आपने by any chance वो course देखा है या कोई भी दूसरा react का course या resource से react सीखी ह�
1:33
या फिर आपने react के बारे में सुना है तो आप लोगों को जरूर मालूम होगा कि react router dom नाम का package अलग से install करना पड़ता ह�
1:40
और मैं आप लोगों को बता रहा हूँ personally आप मेरे इन words पर believe करो यार बहुत pain होता ह�
1:45
जब आप लोग react.out.dom इस्तेमाल करते हो उसको configure करते हो अलग-अलग URLs पर अलग-अलग components क�
1:52
render करने के लिए ये चीज next.js में इतनी आसान है कि आप लोगे बास एक pages folder ह�
1:56
और उस pages folder के अंदर आप लोग अपने javascript components जो की react components हैं वो बना सकते ह�
2:03
और आपकी जो file का नाम है उसके हिसाब से आपके end points बन जाएंग�
2:08
automatically कुछ करने की जरूरत नहीं पड़ेगी तो ये feature मुझे next.js में बहुत कमाल का लगता ह�
2:14
इस वीडियो के अंदर पूरा structure दिखाऊँगा आप लोगों को कैसे बनेगा website क�
2:18
इस hunting coder block को मैं बहुत awesome बनाने वाला हूँ चलते हैं computer screen के अंदर और देखते हैं यह काम कैसे किया जाएग�
2:24
यार यह block मुझे बहुत आनम दे रहा है आपने को भी दे रहा होग�
3:20
बात करी थी चेंजेस की जा सकते हैं इसके बट अभी हमारा मुद्दा यह नहीं है कि ऐसा दिखता है कितना अच्छा दिखत�
3:26
है कितना बुरा दिखता है बल्कि मुद्दा है कुछ पेजेस बनाना जो कि हम लोग बनाने वाले हैं भी ठीक है तो यहां प�
3:33
आप लोगों ने अभी तक यह नेक्स्ट की प्लेलिस्ट एक्सेस नहीं करिए तो इसको जरूर करें एक्सेस ठीक है अ�
3:38
यहां पर हम लोग क्या करेंगे कि आएंगे वापस है हमारे सोर्स कोड पर और सोच कोड पर आने के बाद हम लो�
3:44
structure बनाएंगे तो मैंने आप लोगों को एक बात तो बहुत पहले बता दी थी और यह थी कि अगर आप लोगों को इसमे�
3:50
पेजेस आड करने है तो आप सिंपली पेजेस फोल्डर के अंदर जाकर फाइल बना सकते हो ठीक है तो मैं दिखाता हूं आ�
3:57
पेजेस फोल्टर के अंदर जैसे मान लो मैंने about.js बना दिया और RAFCE नहीं कर रहा काम उसका रीजन यह है कि मैंन�
4:04
react, redux, ES6, ES7 पता नहीं ऐसे कुछ extension का नाम है यह रही मैंने इसको enable नहीं किया ठीक है मैं इसको यहाँ पर नही�
4:12
मैं इसको वर्कसपेस में नियुक्त करूंगा हां अब ठीक है मैंने इसको इनेबल कर लिया है अब मैं लिखूंग�
4:19
आरेफ सी तो आप देखो यहां पर एक या कंपनेंट हम कुछ इस तरह से बना सकते हैं ठीक है तो मैंने यहां प�
4:24
कुछ इस तरह से रियाग कंपोनेंट बना दिया मैं इसका नाम रखूंगा अब आउट और इसका नाम मैं इसके अंदर में डाल दूंग�
4:31
इस इस माय अब आउट कंपोनेंट ठीक है शेयर किया और स्लाश बॉट इस इस माय अब आउट कंपोनेंट ठीक है बढ़िय�
4:43
इसी तरह मैं क्या करूंगा जो मैंने यह बनाया है कॉन्टैक्ट और ब्लॉग यह पेजेस भी बना दूंगा ठीक है तो मैं क्या करूंगा यहां पर बनाऊंगा कॉन्टैक्ट डॉट जेस आरेफ सी लिखूंगा और यहां पर मैंने यहां पर कॉन्टैक्ट के सी को कैपिडल �
5:13
ब्लॉग डॉट जेस ठीक है और मैं आप लिख दूंगा रेफ सी और ब्लॉग और मैं आप लिखूंगा इस प्लॉप ठीक है और यहां पर आ�
5:24
देखो लाइट लॉग दिखुंगा और यह क्या हो गया लाइट लॉग लिखना है सिर्फ लाइट लॉग पोस्ट नहीं लिखन�
5:30
लाइट लिखा तो यहां पर क्या रहा है एक्सपोर्ट डिफरेड पोर्ट इस नॉडर एक कंपोनेंट इस कैसा मजाक है डीफर्�
5:57
नहीं पता नहीं है क्या हो गया है कि जो है अंदर चली गई है बाहर नहीं आ रही निकली कोई बात नहीं आ गई ज़िसे�
6:02
कोंटैक्ट पेज हमने लिखा है इसको हम ब्लॉक कर देंगे ठीक है और इसे कॉपी करके यहां पेस्ट करेंगे यहां पेस्�
6:08
लिए सेव करेंगे और यहां पर ब्लॉग होम पेज लिख देंगे और अभी यहां पर आप लोग देखना कि मैं रिलोड करूंगा त�
6:14
इन दिस ब्लॉग होम पेज लिख कर आ गया ठीक है बैक करूंगा एक और बार और यहां पर हमने हो बना लिया बट बना लिय�
6:21
पूरा लें कॉटेंट बना लिया अब हमें ब्लॉग पोस्ट बनाना है और ब्लॉग पोस्ट बनाने के लिए मैं बनाने वाल�
6:26
एक फोल्डर ठीक है ब्लॉग पोस्ट आप से फोल्डर बनाया मैंने और मैं यहां पर लिखूंगा स्लग डॉट चेस अब लो�
6:34
यह क्या कर दिया वह नहीं ठीक है यह क्या कर दिया इस लग डॉट जस वह डाइट इवेन मीन मैंने आप लोगों को बताय�
6:39
था किस तरह से आप लोग डाइनामिक रोट्स पर आ सकते हैं अगर आप लोगों को याद हो तो ठीक है तो भी क्या करूंग�
6:44
और यहां पर करूंगा क्या ठीक है और मैं यहां पर क्या करूंगा लिखूंगा इंपोर्ट यूज राउटर राउटर राउटर यूज राउट�
7:01
नेक्स्ट यूज रॉटर रॉम नेक्स्ट लेश रॉटर पदनी यार याद नहीं रहती है चीजें यार नेक्स्ट जेस डाइनामिक राउट्स ठीक है औ�
7:14
वैसे मैंने सही लिखा है use router from next slash router और उसके बाद तो steps एकदम simple है ठीक ह�
7:18
क्यों simple है जो मुझे simply यह लिखना है router is equal to use router ठीक है और यह लिखने के बाद मैं क्या करूँग�
7:26
टो लॉग लिखूंगा और लिखूंगा राउटर डॉट क्वेइरी और मैं जैसे ही सेव करूंगा और मैं आप लोगों को दिखाता हू�
7:34
यहां पर मैं अपने वह प्लेश ब्लॉग पोस्ट स्लैश हॉट यूज कीबोर्ड ठीक है अब यहां पर कह रहा है कि नेक्स�
7:41
रॉटर यह इस नॉट आफ फंक्शन नॉट आफ फंक्शन यूज रॉटर कौन स्टॉप रिजिवल यूज रॉटर लिखाया तो यह से क�
7:48
यूजर राउटर लिख दिया है मैंने बताओ यार सेव किया और अभी मैं रिलोड करूंगा तो आप लोग देखो यहां प�
7:55
इंटरनल सर्वर एलर आया और स्लड टॉट जएएस यूजर राउटर इज नॉट डिफाइन या यूजर राउटर किया तो अच्छे यहा�
8:03
यूजर लिख दिया है वह देखते हैं रिलोड करूंगा और यहां पर क्या दिक्कत आ रही है इज नॉट फंक्शन यू�
8:10
राउटर इज नॉट फंक्शन व्हाई ऐसा क्यों मुझे बताया जा रहा है मैंने ठीक तो किया है ओके मैंने किया यहा�
8:16
और साइड इंबोर्ड्स गर्रस फर्ट लगा रखे हैं और कैसे कैसे हो मानेगा तो देखो जो मारी राउटर डोट क्वेर�
8:23
उसके अंदर देखो क्या आ रहा है हमारी राउटर डोट क्वेरी जो उसके अंदर स्लग आ रहा है आउट यूज कीबोर्ड त�
8:29
यहां पर इसको क्या कर सकता हूं, slug को निकाल सकता हूं इसके अंदर से, router.query के अंदर से
8:34
तो मैं यहां पर लिखूंगा, कौन slug is equal to router.query, और मैं syntax का use करूँगा
8:39
JavaScript के, destructuring router object slug slug variable
8:52
तो यहां पर मैं क्या कर सकता हूं भी कुछ इस तरह से जैसे मैं रियाट में प्रेंट करता हूं वैसे इस तरह स�
8:59
प्रेंट कर सकता हूं तो आप देखो यहां पर हाउट यूज कीबोर्ड आ गया अगर मैं आप रियाट लिखो तो यह तो सभी जानत�
9:07
आप यहां पर प्रिंट हो गया आगे ठीक है तो कुछ भी आप लिखोगे अगर आप यहां पर मतलब आप कुछ भी लिख द�
9:14
मतलब कुछ भी लिख दो मतलब कुछ भी मैं यह बताना चाहता था कुछ भी लिख दो ठीक है वह यहां पर प्रेंट ह�
9:23
तो ऐसा होता क्यों ऐसा हो इसलिए रहा है क्योंकि स्लग निकल कर रहा है राउटर को एक वैसे और स्लग को यहां प�
9:30
प्रिंट कर रहे हैं बट प्राक्टिकल सेनारियोस में हम लोग ऐसा नहीं करेंगे हम लोग प्राक्टिकल सेनारियोस मे�
9:34
करेंगे कि हम लोग सबसे पहले जो स्टेप है वो तो यह है कि इस लग को निकाल लो फिर हम शायद डाटाबेस क�
9:41
क्वेरी करेंगे या अपनी एपीआई का इस्तेमाल करेंगे वहां से कंटेंट को लेकर आएंगे और वहां से कंटें�
9:46
लाने के बाद इस तरह से print कराएंगे ठीक है बट you got the point की कैसे चीजे काम कर रही है कैसे ये ह�
9:53
destructuring करते हैं किस तरह से use router को इस्तेमाल करते हैं ठीक है I hope कि आप लोगों को समझ में आगे है�
9:58
हमने सारे के सारे useful pages बना लिये, यानि कि हमारी blog का structure ready है
10:02
और कोई मुझे page बनाना होगा future में, तो मैं यहाँ पर pages में add कर दूँगा
10:06
pages के अंदर कुछ इस तरह से files और folder structure बना कर, अपनी website को बना पाना
10:13
HTML, CSS, JavaScript की आद दिलाता है, जब हम plain HTML, CSS, JavaScript का use करते हैं
10:28
8, tutorial 8 right, देखता हूँ, 7, हाँ 8, ठीक है, tutorial 8 अभी हमारा खतम हो चुका है
10:35
push कर दूँगा मैं, और अगर आप लोगों नहीं पता है कैसे use करते हैं, यह tool मैं कौन सा use कर रहा हूँ, मुझे पता है कुछ comments आने वाले हैं
10:40
जो कहेंगे कि यह वाला कैसे use करना है, GitHub desktop, तो मैंने गिटव डेस्टॉप पर एक शॉट पर आ रहा ह�
10:46
मैंने एक शॉट पर आ रहा है वो देख लेना आप लोग गिटव डेस्टॉप सेव्स अ लोर आफ टाइम और हैसल्�
10:53
यह वाला शॉट देख लेना 58 seconds और आप लोगों गिटअब desktop यूज़ करना आजाएगा ठीक ह�
10:58
I hope मज़ा आया सबको और यह hunting quarter में मज़ा आरा है मुझे पता है मुझे comment के लिए कुछ लो�
11:03
बता रहे थे करते हैं यह नीचे powered by Varsal हटा लो हटा लेंगे यार हटा लेंगे हटा लेंगे और यहाँ प�
11:21
नेक्स्ट टाइम करते है�
#Blogging Resources & Services