Up next in 10
Adding Template to our Next.js project _ Portfolio Website + Blog Using Sanity.io #6
Feb 21, 2024
In the video "Adding Template to our Next.js project _ Portfolio Website + Blog Using Sanity.io #6," viewers are introduced to the process of incorporating a template into a Next.js project for the development of a portfolio website and blog using Sanity.io. The tutorial provides step-by-step instructions on how to select and integrate a suitable template into the Next.js project, ensuring a visually appealing and functional design for the website. Viewers can expect to learn about importing and customizing templates, adapting them to fit the specific requirements of their project, and leveraging the flexibility of Next.js to enhance the website's frontend. By following along, viewers can gain valuable insights into streamlining the development process and achieving professional results in their portfolio website and blog.
Show More Show Less View Video Transcript
0:00
अपने पिछले वीडियों में हम लोगों ने सैनिटी के तुरो अपने प्रोज़ेक का बैक एंड पूरा सेट कर दिया थ��
0:04
आज मैं आप लोगों को बताऊंगा किस तरह से हम लोग फ्रेंट एंड को एकदम एजी बनाएंग��
0:09
हम लोग इस्तेमाल करने वाले हैं एक टेंपलेट का जो की आपसलूटली फ्री हम लोग को मिलने वारी ह��
0:13
यह ओन्लाइन टेंपलेट किस तरह से हम लोग अपने प्रोज़ेक में इंटिग्रेट करेंगे यह मैं आप लोग को इस वीडियो में बताऊंग��
0:19
क्योंकि जैसेक्स में जब हम प्लेन एस्टेमाल को करते हैं तो प्रॉबलम्स आती है��
0:23
लेकिन वो प्रॉबलम्स कितनी आसान मैं आप लोग के लिए बनादूंगा, सॉल्ब करन��
0:26
चलते हैं काम्पिटर स्क्रीन में और देखते हैं पर इसलिए हम लोग ने काफी चीज़ें देखी हैं, अब हम यहां पर करने क्या हुआल ह��
0:32
सबसे वाले तो सब लोग जुलीजियो प्लेलिस्ट को एकसेस कर लो और उसकी के साथ साथ मैं यहाँ पर दोनों अपने सैनिटी एस वेल एस नेक्स जेस स्टार्ट करूँग��
0:40
सबसे वाले मैं यहाँ पर CD, Next Rendered करूँगा और यहाँ Dev लिखूँग��
0:45
और यहाँ पर मैं CD करूँगा सैनिटी वाले फूल्डर को और यहाँ स्टार्ट करूँग��
0:51
जो की एंटरन सैनिटी स्टार्ट को रन करेगा तो दोनों खोल लेते हैं और अब क्या करेंग��
0:56
जो हमारी टेंपलेट है यह आटम टेंपलेट जो की हमने डाउनलोड करी ह��
1:00
हम लोग इसको अपलाइ करेंगे अपने Next JS अप्रिकेशन में ठीक ह��
1:04
तो यहाँ पर यह खुली मेरी सैनिटी और यह खुला मेरा Next JS
1:07
काँ गए तुम Next JS यह रहे तुम यह खुला मेरा Next JS
1:11
यह खुली मेरी सैनिटी और यहां से मैं Content चेंज करूंगा और यहां पे चेंज हो जाएगा ठीक है लेकिन यार ये पेज अच्छा नहीं लग रहा ह��
1:19
और विश्चार आपकी टेंपलेट का इस्तिमाल करना चाहूंगा तो इस काम को करने के लिए मैं क्या करूंगा अपनी इस अटम टेंपलेट को खुलूंग��
1:25
और शिफ्ट राइट लिक करके उपन विध कोड करदूंगा इसको और यहाँ पर जो मेरी index.html है मैंने इसका head को बंद किया ह��
1:35
तो मैं सबसे पहले तो क्या करूंगा next head का इस्तिमाल करके यहाँ पर अपनी next js application में इसको लगा दूंग��
1:42
तो यहाँ पर मैं इसको अपने टर्मिनल को हाइड करदूंगा और यह जो मैंने console.log.0 लिखा है इसको भी मैं हटा दूंग��
1:52
और मैं इस पूरे के पूरे div को comment out करता हू��
1:56
comment out कर रहा हूं हटा नहीं रहा हूं क्योंकि जरूरत पड़ सकती है मुझ��
2:00
मैं नहीं जाता कि मुझे बात में प्रॉल्लम हो तो यहाँ पर next head का इस्तिमाल करते हु��
2:06
import head from next head हमने अलड़ी कर लिया है और यहाँ पर अगर मैं आओं तो लगता है दिक्कते है��
2:18
क्योंकि कोई दिख नहीं रहा है नहीं दिक्कते नहीं है कोई दिक्कत नहीं ह��
2:23
main.css करके एक फाइल है जो इसको नहीं मिल रहा है आई गेस link href physical रही है main.main.css
2:33
अनिवेस इसको देख लेंगे हम लोग अभी अभी के लिए हम लोग क्या करेंगे कि नीचे का जो बाकी का content ह��
2:39
उसको copy paste करते हैं जो body के अंदर है तो एक तो ये dev रहा एक ये dev रहा एक ये dev रह��
2:46
बहुत सारे dev हैं वैसे तो यार बहुत सारे dev हैं पूरा का पूरा content है देखो इसको चलाना भी एक challenge ह��
2:52
क्योंकि हम next js में हैं और ये चीज बनी हुई है मैं इसको जड़ा format document करू��
2:57
हम लोग next js में हैं और ये चीज बनी हुई है वो बनी हुई है directly HTML, CSS, JavaScript मे��
3:04
तो इसके outermost dev को मैं डूंड रहा हूँ कहां गया इसका outermost dev
3:10
यहाँ पर कहीं है body के अंदर ये dev है और ये इसका outermost dev ह��
3:16
तो ये dev x data is equal to ये एक dev है ये एक dev ह��
3:22
इसको copy करता हूँ copy करके और लेट सी कि directly paste करने से ये आ रहा है कि नहीं आ रहा ह��
3:30
थोड़ी सी दिक्कते हो सकती है लेकिन वो solve करने के लिए मैं आ पर बैठा हू��
3:35
ये देखो ये सारी के सारी problems आ गईं क्या यहाँ पर कोई fix करक��
3:40
सबसे पहले तो class is equal to को class name is equal to से replace करना होग��
3:44
लेकिन उपर से आता हूँ मैं बहुत सारी HTML है यह बहुत सारी HTML ह��
3:48
तो जाहिर सी बात है कि मुझे इसको देखना पड़ेगा ठीक करना पड़ेग��
3:52
सबसे पहले control left करके जो class is equal to है इसको replace करना होगा class name is equal to स��
3:58
ठीक है replace all किया जाए हाँ जी कर दिया अब इसके बाद dev x data is equal to यह चीज मैं हटा रहा हूँ यहां से भी ठीक ह��
4:09
और कहां पर अब दिक्कत आ रही है लगता है एक dev एक्स्टर लगा हुआ ह��
4:14
if I am not wrong फॉर्मैट डॉक्यूमेंट किया यह dev यह रह��
4:20
absolute class name is equal to भी कर दिया image भी अच्छे से बंद हो रखा ह��
4:27
अब क्या दिक्कत आ रही है span onclick is equal to यह लिखा हुआ ह��
4:34
तो इससे थो होनी पारा काम करते हैं कि इसको एक एक करके डालते हैं यहां प��
4:38
हम करेंगे क्या सबसे पहले लेकर आएंगे अपने मैं इसके फॉर्मैट डॉक्यूमेंट कर द��
4:44
मैं क्या करूँगा कि यह वाले डिप को लेकर आओंगा सबसे पहले ठीक है तो मैं इसको ऐसे कर देता हूँ और यह वाले डि��
4:51
अगर मैं सिर्फ यह वाले डिप लेकर आओंगा कंट्रोल सी करूँगा और यहां पर कंट्रोल वी करूँगा तो देखता हूँ क्या सी��
4:57
मन रहा है ठीक है यह आ गया यहां पर कुछ ऐसे तरह से और यहां पर क्या दिक्कत आ रही है आपके रा��
5:03
जैसे एलिमेंट से मैं पर परण पर परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण पर��
5:33
परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण पर��
6:03
मुझे यहाँ पर सिर्फ लोगो इमेज लिख कर आ रहा है और ये सारी के सारी चीज़े भी मुझे नहीं देखने को मिल रही ह��
6:09
अपने index.html, sorry, JS के अंदर तो यहां पर मैं दरह सर्वर को रीस्टार्ट करके देखता हू��
6:15
यहां पर परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण ��
6:45
परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण परण पर��
7:15
इस तरह से background image ठीक है और ये होना चाहिए कु��
7:22
इस प्रकार से URL धिस धिस धिस धिस ठीक है तो मैंने यहाँ पर एक object दे दिया ह��
7:29
एफ्यू मामेंस लेटर तो यार मैंने यहाँ पर JSX वग़ारा को ठीक किय��
7:33
और ये template कुछ इस तरह से काम कर रही है इस तरह से काम करना पड़ेग��
7:37
तो यहाँ पर अपनी index के अंदर script को आड़ करेंगे तो यहाँ पर आपने index के अंद��
7:43
script को आड़ करेंगे तो यहाँ पर आपने index के अंदर script को आड़ करेंग��
7:49
तो यहाँ पर आपने index के अंदर script को आड़ करेंगे तो यहाँ पर आपने index के अंद��
7:55
script को आड़ करेंगे तो यहाँ पर आपने index के अंदर script को आड़ करेंग��
8:01
तो यहाँ पर आपने index के अंदर script को आड़ करेंगे तो यहाँ पर आपने index के अंद��
8:07
script को आड़ करेंगे तो यहाँ पर आपने index के अंदर तो यहाँ पर आपने index के अंद��
8:13
script को आड़ करेंगे तो यहाँ पर आपने index के अंदर script को आड़ करेंग��
8:19
तो यहाँ पर आपने index के अंदर script को आड़ करेंगे तो यहाँ पर आपने index के अंद��
8:25
script को आड़ करेंगे तो यहाँ पर आपने index के अंदर तो यहाँ पर आपने index के अंद��
8:31
script को आड़ करेंगे तो यहाँ पर आपने index के अंदर script को आड़ करेंग��
8:37
तो यहाँ पर आपने index के अंदर script को आड़ करेंगे तो यहाँ पर आपने index के अंद��
8:43
script को आदर तो यहाँ पर आपने index के अंदर script को आद��
8:49
तो यहाँ पर आपने index के अंदर script को आपने index के अंद��
8:53
तो यहाँ पर आपने index के अंदर तो यहाँ पर आपने index के अंद��
8:57
तो यहाँ पर आपने index के अंदर तो यहाँ पर आपने index के अंद��
9:01
तो यहाँ पर आपने index के अंदर तो यहाँ पर आपने index के अंद��
9:05
तो यहाँ पर आपने index के अंदर तो यहाँ पर आपने index के अंद��
9:09
तो यहाँ पर आपने index के अंदर तो यहाँ पर आपने index के अंद��
9:13
तो यहाँ पर आपने index के अंदर तो यहाँ पर आपने index के अंद��
9:17
तो वाओ यह पर ज़िन्दगी का आपने पर ज़िन्दगी का आपने पर ज़िन्दगी का आपने पर जिन्दगी का आपने पर जिन्दगी का आपने पर जिन्दगी का आपने पर जिन्दगी का आपने पर जिन्दगी का आपने पर जिन्दगी का आपने पर जिन्दगी ��
9:47
क्योंकि इसकी पर्ट यहाँ पर ज़िन्दगी का आपने पर जिन्दगी का आपने पर जिन्दगी का आपने पर जिन्दगी का आपने पर जिन्दगी का आपने पर जिन्दगी का आपने पर जिन्दगी का आपने पर जिन्दगी का आपने पर जिन्दगी का आपने पर ��
10:17
तो यह देखने के लिए मैं इसको कॉपी करूँगा और इसको यहाँ पर देखूँग��
10:21
यहाँ पर देखूँगा इसको कहां पर है यह और इसके अंदर हमने यहाँ प��
10:25
opacity 100 और यह mobile view वाली class हटाई है इसके वाज़े से दिक्कद आ रही ह��
10:29
तो यह जरूरी नहीं है कि मैं इस template को कॉपी करूँगा मैं एक काम करता हू��
10:33
यहाँ पर control left करता हूँ ठीक है यहाँ पर करता हूँ control left करता हू��
10:37
यहाँ पर इसको paste करता हूँ और यह वाले div को न हटाई देता हू��
10:41
यहाँ पर करता हूँ यहाँ पर करता हूँ यहाँ पर करता हू��
10:47
यहाँ पर करता हूँ यहाँ पर करता हूँ यहाँ पर करता हू��
10:53
यहाँ पर करता हूँ यहाँ पर करता हूँ यहाँ पर करता हू��
10:59
यहाँ पर करता हूँ यहाँ पर करता हूँ यहाँ पर करता हू��
11:05
यहाँ पर करता हूँ यहाँ पर करता हूँ यहाँ पर करता हू��
11:11
यहाँ पर करता हूँ यहाँ पर करता हूँ यहाँ पर करता हू��
11:17
यहाँ पर करता हूँ यहाँ पर करता हूँ यहाँ पर करता हू��
11:23
यहाँ पर करता हूँ इसको मैंने हटाया तो उपर से about services यह सब गायब हो गय��
11:28
नहीं हुआ नहीं हुआ यार एक बार ओरिलोड करके देखूंगा यार मैं क्या सभी चीज को डिलीट कर रहा हूँ की नही��
11:35
ठीक है तो अगर मैं ये वाली चीज डिलीट करूँ समझ नहीं आरा मुझे मैं क्या कर��
11:42
लगता है ये मुबाइल में view होने बाली वो जो हमारी नीचे को लड़कती है न इस पर क्लिक करने के बा��
11:48
जो शो होती है वो है ठीक है तो इस पर क्लिक करने के बाद ये चीज शो हो गी आई के��
11:53
तो मैं काम करता हूँ इसको हिडन कर देता हूँ भी के लिए ठीक है और मैं इसको हिडन करऊँग��
11:57
तो मेरी template लोगों ठीक ठीक काम कर रही है भी ठीक है बहुत बढ़िया काम कर रही ह��
12:01
और यार सारे animations चल रहे हैं सबकुछ चल रहा है सबकुछ चल रहा है बहुत ही बढ़िया यार ठीक ह��
12:08
तो मैं read more पर क्लिक करूँगा तो मुझे मेरा blog post दिखना चीज़ि��
12:12
और यार पर मेरे top 3 blog post मुझे दिखने चीज़िए तो उनको भी मैं show करके आप लोग को दिखाऊँग��
12:17
आप लोग को दिखाऊँगा आप लोग को दिखाऊँगा आप लोग को दिखाऊँग��
12:23
आप लोग को दिखाऊँगा आप लोग को दिखाऊँगा आप लोग को दिखाऊँग��
12:29
आप लोग को दिखाऊँगा आप लोग को दिखाऊँगा आप लोग को दिखाऊँग��
12:35
आप लोग को दिखाऊँगा आप लोग को दिखाऊँगा आप लोग को दिखाऊँग��
12:41
आप लोग को दिखाऊँगा आप लोग को दिखाऊँगा आप लोग को दिखाऊँग��
12:47
आप लोग को दिखाऊँगा आप लोग को दिखाऊँगा आप लोग को दिखाऊँग��