Up next in 10
Creating Pages for Codeswear.com _ NextJs Tutorial for Beginners #35
0 views
Feb 13, 2024
In the video "Creating Pages for Codeswear.com _ NextJs Tutorial for Beginners #35," viewers are taken through the process of creating pages for the Codeswear.com project within a Next.js environment. This tutorial, specifically designed for beginners, covers the fundamental steps of creating multiple pages for the e-commerce website. Viewers can expect to learn how to set up routes, create navigation links, and develop individual pages such as the home page, product listing page, product detail page, and any other necessary pages for the Codeswear.com website. By following along with this tutorial, beginners can gain practical experience in building a multi-page web application using Next.js.
View Video Transcript
0:00
अगर आपने भी एक online e-commerce store विजिट किया होगा तो आपको पता होगा कुछ pages हर online selet store में होते हैं जैसे की product page, home page, contact page, उसी के साथ साथ checkout वाला page, card का page, किस तरह से आप लोग order को जब generate कर लेंगे वो वाला page, और भी बहुत सारे pages जैसे की login, sign up ये सारे होते हैं, इनकी एक blank slate template हम �
0:30
कि अब यहां पर कोड्स वेयर के अंदर कुछ पेजेस हम लोग ऐड करेंगे और पेजेस जब मैं कहता हूं मेरे कहने का मतल�
0:44
है कि जो हमारा होम पेज होगा जो हमारा कार्ट पेज होगा हमारे चैकआउट का पेज होगा हम अगर टीशर्�
0:50
लें तो टीशर्ट का पेज़ होगा मर्क्स लें तो मर्क्स का पेज़ होगा होडी सेल करें होडी इसका पेज़ होगा अगर य�
0:55
किसी और तरह की कॉमर्स वेबसाइट तो उसमें और भी बहुत सारे पेज़ेंगे कांटेक्ट हो सकता है दस तरह के पेज़े�
1:00
पर अब होता है उनको बनाने की कोशिश करते हैं ठीक है तो यहां पर मैं जल्दी से क्या करूंगा सबसे पहला काम व�
1:06
यह होने वाला है कि मैं आ जाऊंगा अपने पोड़ बेस के अंदर ठीक है और डिरेक्टली यहां पर सिंपली जो पेजेस ह�
1:13
इसके अंदर पेजेस बनाऊंगा कौन से पेजेस होंगे वह जो मेरे दिमाग में आ रहा है मैं जल्दी से यहां पर बनात�
1:18
जाता हूं ठीक है सबसे पहला पेज जो मेरे दिमाग में आ रहा है वह अब ऑफ टो जस ठीक है और मैं यहां पर लेखूंग�
1:22
rafce और about ठीक है सिंपल सी कहानी है ठीक है save करूँगा इसक�
1:26
इस file को save करने के बाद simply मैं क्या करूँगा क�
1:30
यहाँ पर एक और file बनाऊंगा ठीक है एक मिनट मैं तरह screen cast
1:34
mode को ओन कर लेता हूँ इसके बाद जो एक और file बनाने वाला हूं वह है मेरी टीशर्ट डॉट जेस ठीक है टीशर्ट डॉट जेस ठीक है आरे एफ सी ठीक है यहां पर ह�
1:45
सारी टीशर्ट को लिस्ट करेंगे इसके बाद लेट एसेम अग्ज ठीक है मग को अगर हम लिस्ट करना चाहते हैं तो मग्�
2:10
जाते हो तो लोग यहां पर यह कंटेक्ट देखने को आपको मिल रहा है यह पेज चल रहा है अक्शन में चल रहा ह�
2:15
ठीक है अब मैं क्या करूंगा एक पेज चेक आउट का बनाऊंगा ठीक है चेक ऑट डॉट जेस फिर से वही करूंगा आरेए�
2:22
थोड़ा बोरिंग सा क्रोसीजर है लेकिन यार करना पड़ेगा ना पेजेस बनाने इतने सारे इतना बड़ा स्टोर बनाने त�
2:27
पेजेस तो बनाने पड़ेगा ना बात चाहिए अब इसके बाद क्या कोई और चीज है जो कि मेरे दिमाग में आ रही है लॉग इन साइ�
2:34
लॉग इन डॉट जेस आरेएफ सी इ लॉग इन ठीक है लॉग इन के बाद साइन अप या फिर क्रिएट अकाउंट जो भी आप नाम देना चाहत�
2:46
ठीक है, मैं भी यहाँ बार बार इसमें भर नहीं आऊंगा या भर देता हूँ यार, R A F C E
2:51
sign up, ऐसा करने से क्या होगा कि बाद मेरा headache खत्म हो जाएगा, ठीक है
2:55
और क्या मैं करना चाहूँगा, sign up के साथ साथ, let us say, मैं
2:58
t-shirt हो गई, mugs हो गई, hoodies हो गई, ठीक है और आरेएफसी ठीक है उडीस और और कोई पेज में दिमाग में भी आ नहीं रहा है फिर एक चीज और ह�
3:12
सकती है ऑर्डर ऑर्डर जब आएगा हमारे पास तो उसका एक पेज होगा ठीक है और डॉट जस आरेएफसी ई ऑर्डर ठी�
3:20
फिर इसके बाद एक product page होगा, जो कि हमारे सारे products को list करेगा, तो इसके लिए मैं एक बनाओंगा folder
3:25
और आप लोग कहोगे यार ये क्या कर रहे हो, let me explain, product page मैं इसलिए बना रहा हूँ
3:29
क्योंकि product के अंदर हमारे पास बहुत सारे products होंगे, वो mug हो सकता है
3:33
वो टीशर्ट हो सकती है वो होडीज हो सकती है ठीक है कुछ भी हो सकता है हो सकता है हम एक चौथी चीज सेल करे�
3:39
लेट असे स्टीकर्ट्स ठीक है वो हो सकता है ठीक है तो प्रॉपर प्रॉड़क्ट को एक प्राइमरी कीस है जो की स्लग हो सकता ह�
3:45
या फिर एक product ID हो सकती है उससे pull करके उस product की information को दिखाना यह वाला page करेग�
3:51
flipkart random e store amazon Amazon
4:27
लग डॉट जैसे मैंने क्यों लिखा कि इस लग होगा स्लग क्या होता है कुछ इस तरह का जो हमारा टेक्स्ट होत�
4:34
जैसे कि यहां पर आप देखो फैवी क्रिल मोल्डिट क्ले सेट मोल्डिंग के लिए मॉडलिंग स्कॉल्पिंग यह जो चीज ह�
4:42
यह इसलिए ठीक है मेरा स्लाइट प्रोडक्ट के बाद आ रहा है इसलिए इन फ्लिप कार्ड वालों को डारेक्टल�
4:47
आ रहा है ठीक हो टेंचन नहीं ठीक है और यह यहां पर सारी की सारी डिटेल्स मुझे दिखाने पड़ेंगे ठीक ह�
4:52
product की तो यहां पर मैंने कुछ इस तरह से लिख दिया अब इसके अंदर मैं बहुत सारी चीजें आईएड करूंगा जैसे क�
4:58
इस पर्टिकुलर पेज के अंदर मैं टाइटल डिस्प्ले कराऊंगा प्रोडक्ट का हो सकता है मैं गैट स्टाइटिक प्रॉब्स क�
5:04
या फिर यह सब्सक्राइब को उस टाइप लेखेंगे लेकिन यह मेरा बन चुका है ठीक है तो मैं यहां पर लिख दूं औ�
5:12
मैं इसका नाम लेटर से दूं इसका नाम � whereas लग ठीक है तो यह कंपोनेंट मैंने एक्सपोर्ट कर दिया ठीक ह�
5:19
इस पर डिफर्ट्स लग अब यह काम तो मैंने कर दिया ठीक है अब मैं यहां पर क्या करूंगा कि यहां पर इस पेज क�
5:26
अभी नहीं बनाऊंगा इसको अभी ऐसे छोड़ दूंगा जिस आपको दिखाना चाहता था लेकिन मैं आपको एक चीज दिखात�
5:30
यह होता है हमारा डाइनमिक पेज राउट्स नेक्स्ट ठीक है और डाइनमिक राउट ठीक है और मैं आपको दिखाना चाहता हूं इ�
5:40
चीज को इसमें लोग इसको कॉपी करता हूं ठीक है मैं मैं इसको कॉपी करके पेस्ट करता हूं पोस्ट पोस्ट दी दिय�
5:45
लुटा इसको नाम अब राउटर इस एकल टू यूज राउटर पीडी को मैं स्लग करूंगा ठीक है और आप टो कोई और य�
6:11
एवरो ठीक है यह जो यह प्रोडक्ट था पूल्डर का नाम प्रोडक्ट था तो यह पर आ गया यहां पर जो भी लिखो�
6:25
वह उठा सकता हूं यहां से और उसके बाद डिटाबेस को प्रोडक्ट कर सकता हूं आक्शन प्रोडक्ट इनफॉर्मेशन क�
6:30
आप समझ में आ रहा हो कि यह क्यों किया जा रहा है ठीक है जब मैं ले लूंगा तो मैं डिटाबेस्ट में से पता कर सकता हूं कि कौन सा प्रॉडक्ट मुझे पूल करना है उसकी इमेजेस उसकी और जो इंफॉर्मेशन है वह सारी हम पूल कर पाएंगे ठीक है तो आप कि य�
7:00
तो मुझे realize होगी कि मुझे यह भी बनाना है, मुझे यह भी बनाना चाहिए तो इस तरह की चीज़ें जब आएंगी मेरे दिमाग में तब मैं बना दूँगा, ठीक ह�
7:05
I hope कि अभी तक का जो page structure है वो आपको समझ में आ रहा होग�
7:09
और अगर आ रहा है तो मुझे नीचे comment में लिख दो लो यार अभी तक सब clear है ठीक ह�
7:13
जो कि ये बनने वाला है एक बहुत ही खतरबनाक e-commerce store और आप इसको अपना launch भी कर सकते ह�
7:18
ये मैं आप लोगों को भरूसा दिलाना चाहता हूँ आप अगर इस tutorial को देख रहे हो तो इसको देखने के बाद एक ऐसा store बनाएंगे जिसको आप launch भी कर सकते हो ठीक ह�
7:26
So I hope कि आपने इस जो playlist है हमारी next.js की इसको access जरूर कर लिया होगा यह नहीं है यह है next.js की playlist ठीक ह�
7:33
और यहाँ पर एक project तो बुरा हो चुका है hunting quarter की दूसरा project चल जाया ह�
7:38
बाद अभी अगर आपको नहीं पता तो ठीक है अभी के लिए इस वीडियो में इतना है guys
7:41
thank you so much guys for watching this video and I will see you next time
8:03
करते है�
#Business Education