Up next in 10
Introduction to Next.js _ NextJs Tutorial for Beginners #1
55 views
Feb 13, 2024
"Introduction to Next.js" is the first tutorial video in a series aimed at beginners interested in learning Next.js, a popular React framework for building web applications. In this video, viewers are introduced to the basics of Next.js, including its features, advantages, and how it simplifies the process of building React applications. The tutorial provides an overview of what Next.js is, its key concepts, and why it is a valuable tool for web development projects. Viewers can expect to gain a foundational understanding of Next.js and its benefits as they embark on their journey to mastering web development with this framework.
View Video Transcript
0:00
नेक्स जीएस के इस कोर्स में आप लोगों का बहुत-बहुत स्वागत है�
0:03
जब भी मैं अपनी लाइफ में एक नई टेक्नोलॉजी सीखता हूँ, तो नैचरली मैं उसको रेजिस्ट करता हूँ�
0:07
मुझे लगता है यार इसके लिए भी एक नई technology सीखनी पड़ेगी ये क्या नाटक है या�
0:10
क्या हम लोग इसको HTML, CSS, JavaScript से नहीं कर सकते ये भी तो एक website ह�
0:14
हमको Next.js सीखने की क्या जरूरत है या फिर हमको कोई दूसरी नई technology सीखने की क्या जरूरत ह�
0:19
अगर आप लोगों के दिमाग में भी कोई ऐसी जीज आ रही है तो मैं आप लोगों को बता दूँ कि Next.js एक ऐसा framework है जिसको आप अपनी life में कभी regret नहीं करोगी कि आपने सीखा ये मेरा favorite javascript framework है और मेरे सापसे इसका इस्तेमाल करके आप लोग बहुत बड़ी application बना सकते ह�
0:49
एक बिल्ट इन रॉटर इसके अंदर होता है और SEO के लिए बहुत सारे टूल्स होते हैं जिसको आप लोग शाय�
0:53
इस्तेमाल करोगे next js के थ्रू वेबसाइट को बनाना बहुत असार होता है क्योंकि यह रॉटिंग की प्रोसेस क�
0:59
फाइल बेस रूटिंग की मदद से बहुत असाथ बना देता है जिसको हम लोग आने वाले वीडियो में देखने ही वाले ह�
1:04
तो कुल मिला के Next.js React वेबसाइट को बहुत ही इजीली, कन्वीरियेंटली, SEO फ्रेंडली वेब में बनाने का तरीका ह�
1:10
अगर मुझे बहुत short में आप लोगों समझाना हो तो Next.js की मदद से आप लोगों को अपनी website को render करने के बहुत सारे options मिलते है�
1:16
अगर आप लोग चाहते हो एक static site generate हो जाए जिसका back-end से कोई मतलब ही नहीं ह�
1:20
तो आप लोग Next.js की मदद से export कर सकते हैं अगर आप लोग चाहते हैं कि Next.js आपको कुछ API roots भी प्रदान करे�
1:27
तो वो चीज़ भी Next.js के अंदर हो जाएगी जो कि इसको सिर्फ frontend का नहीं लेकिन backend का framework भी बनाता ह�
1:32
आप लोग frontend का code और backend का code दोनों Next.js के अंदर लिख सकते है�
1:36
एक typical react application client site पर render होती है यानि कि अगर आप लोग एक typical react application के source code को देखेंग�
1:42
तो उसके अंदर आप लोगों को page का content नहीं मिलेगा वो javascript से बाद में populate किया जाता है in most of the cases
1:48
जो कि एक बहुत बड़ी problem होती है social media websites के लि�
1:52
और search engines के लिए वो आपके content को before and नहीं पढ़ सकत�
1:55
इसलिए Google जैसे search engines आपकी website को rank नहीं करते हैं अगर आप लोग plain react के अंदर काम कर रहे हो त�
2:01
social media websites preview generate website react next problem solve amazing features
2:13
enjoyable और convenient बनाता है with that said हम लोग इस video के अंदर install करने वाल�
2:18
next.js को देखेंगे कि कौन-कौन से वो tools हैं जिसको हमको install करना चाहिए next.js के साथ start करने के लि�
2:23
उसे के साथ साथ मैं आप लोगों को पूरा setup बताऊंगा next.js का जो कि आप लोगों को करना चाहि�
2:28
अगर आप लोग अपनी websites को conveniently और बहुत enjoyable तरीके से build करना चाते हैं त�
2:34
तो चलते हैं computer screen के अंदर और next.js की इस website को setup करते है�
2:39
बनाएंगे कुछ amazing websites इस course के अंदर और बहुत ज़्यादा मज़ा आने वाला ह�
2:44
let's get started तो यार मैं तो आज तो अपनी कंप्यूटर स्क्रीन के अंदर और काफी मजा आएगा इस कोर्स के अंदर आपको पहले बता रह�
2:59
हूं वार्निंग दे रहा हूं कि आप लोगों को हम लोग काफी मज़ेदार प्रोजेक्ट भी बनाने वाले हैं इस कोर्स क�
3:04
यह भी मैं आप लोगों को बता देना चाहता हूं तो यार मैं इस वीडियो को स्टार्ट करूंगा नोट जेस इंस्टॉ�
3:08
लिखकर ठीक है हमने देख लिया काफी बातें कर ली नेक्स्ट जैसे क्या है क्या नहीं है अब यार चलाना इसको त�
3:14
प्रॉब्लम इसको नेक्स्ट नेक्स्ट करूंगा और यह इंस्टॉल हो जाता है एक बार में डिफॉल्ट सेटिंग्स के सा�
3:25
इंस्टॉल कर लेना है इस टॉल रहा है नोट जैसा भी और यह जैसे ही इंस्टॉल हो जाएगा वैसे ही मैं आप लोगो�
3:31
इन फैक्ट मेरा कंप्यूटर काफी तेज है अभी और बहुत तेज यह मेरा इंस्टॉल कर रहा है नोट जेस को बहुत बढ़िय�
3:37
उतनी देर में हम लोग की काम करते हैं जानो होई गैस्ट ऑल यार क्या ही काम करेंगे विश्व को तब लोग डाउनलो�
3:42
ना वीएस कोड क्या होता है यह पूछकर प्लीज शर्मिंदा मत करना ठीक है चुकी वीएस कोड क्या होता है बहु�
3:48
सारे कमेंट्स अभी भी आ जाते हैं कोई बात नहीं सीख जाओगा अगर आप लोग एक एब्सलूट बिगनर तो कोई टेंश�
3:53
बात नहीं है सीख जाओगे इसको डाउनलोड करके इंस्टॉल कर लेना यार मैंने कर रहा हूं अलडी इंस्टॉल मै�
3:57
यहां पर ज्यादा टेंशन नहीं लेना चाहता है इन फैक्ट कैम्सल करूंगा इसको मैंने यहां पर एक नेक्�
4:01
इस कोड्स करके फोल्डर बना रखा है इस फोल्डर के अंदर में क्या करूंगा सारी के सारी फाइल्स जो है वह अपन�
4:06
Sanaa devastated
4:20
आप लोग भी कर लेना install ठीक है और ये करने के साथ साथ मैंने बहुत सारी औ�
4:24
extension install कर रखी है मैं scroll करके दिखा रहा हूँ लेकिन आपको ये सारी install नहीं करनी है क्योंकि मै�
4:28
दस और काम अलग करता हूँ जो कि next.js से related नहीं होते हैं उनके लि�
4:32
इस टॉल कर रखी है अगर कोई करनी होगी इंस्टॉल तो मैं आपको बता दूंगा अब बात करते हैं कि जावास्क्रिप्�
4:37
चाहिए इसके लिए क्या रिया चाहिए हाया चाहिए तो लेकिन हम लोग क्या करेंगे रिफ्रेश करेंगे अपनी रिय�
4:42
रिफ्रेश करेंगे थोड़े वह जावास्क्रिप्ट के बेसिक को और जैसे-जैसे जो जो कंसेप्ट आता जाएगा वह मैं आ�
4:47
लोगों यहां पर बताता जाऊंगा अब यहां पर मैं आप लोगों को बताना चाहता हूं कि एक नेक्स्ट आप किस तरह स�
4:51
जाती है तो यार देखो next जेस application को बनाने के लिए आप लोग individual files को भी बना सकते ह�
4:57
लेकिन हम लोग एक create next step नाम की utility को use करेंगे ठीक है अब इसको किस तरह से use करना ह�
5:04
कैसे एक next application बनानी है ये आप लोग देखो simple सा command है npx से आप लोग को जिस तरह बना सकते ह�
5:09
यान से कुछ इस तरह मना सकते हो, मैं personally यान use करता हूँ, मुझे लगता है कहीं न कहीं यान advantage देता है npm के against
5:15
तो हम लोग यान use करेंगे इस course में, लेकिन यान बस command का difference रहेगा, इतना सा अगर आप लोग npm use करना चाहते हो तो कर सकते हो
5:22
तो Next.js के बारे में तो आपको बता है कि यह इनकरड़ेड़ेबल फीचर्स देता है, SEO है इसके अंदर, और यह जो documentation है न, Next.js की, काफी बज़ेदार है, और साइड में यह जो आपको साइड बार दिख रहा है, जहाँ पर लिखा हुआ है, यह Advanced Features, Upgrade Guide, Migrating to Next, यह सारे का सारा �
5:52
एक command होता है जिसके बारे में आपको अभी ज्यादा attention लेने की जरूरत नहीं पड़ेगी मैं सिर्फ export लेखूँगा देखो यह आ गया next export और यह next export के बारे में मुझे बता देग�
6:00
काफी बढ़िया search बनाया हुआ है वो page आपको देखने को मिल जाएगा जो आप चाहते ह�
6:30
तो मतलब यह है कि यह है तो यह का फ्रेमवर यह लिखोगे तो रियाट ही लेकिन ऑन टॉप ऑफ रियाट आपको द�
6:37
चीजें और देखने को मिलेंगे ठीक है अब नेक्स्ट यह जो लेटेस्ट वर्जन हो काफी कमाल का आपको यह दिखा यहां प�
6:42
लिखा हुआ new, rust compiler, middleware, और edge functions, checks and more
6:48
next.js की जो latest versions है, उसको और fast कर दिया गया, तो यार मुझसे तो रुका नहीं जा रहा
6:52
अगले वीडियो में जल्दी से आउँगा, और आप लोगों को दिखाऊँगा, किस तरह से अपनी पहली next application बनानी है
6:56
और next application की जो advantages अगर आप लोग मुझसे पूछो क्या ह�
7:00
तो मैंने आपको जैसे कि already बताया आप ecstatic app के तौर प�
7:05
ecstatic web application, ecstatic website के तौर पर अपनी site को export कर सकते ह�
7:09
आप लोग APIs भी बना सकते हो आप लोग SEO friendly images को within your application
7:16
नहीं कि आपको externally अपनी images को optimize करने की ज़रूरत नहीं है आपको next.js automatically आपके images को optimize करके दे देग�
7:23
मतलब यार और चाहिए क्या जिन्दगी में आप लोगो को जब ये सारी चीज़ें मिल रही है�
7:27
आते हैं अगले वीडियो में और वहाँ पर हम लोग देखेंगे कि next.js को किस तरह से use करना ह�
7:32
अपनी पहली next application किस तरह से बनानी है ठीक है यह पहला वीडियो है तो मैंने भी playlist बनाई नहीं ह�
7:51
लेकिन यह playlist आप लोगों को यहाँ पर देखने को मिल जाएगी और यहाँ पर आईए गई नगई playlist
7:56
next JS tutorials something something ठीक है वो देख लेना आप लोग और एक बहुत ही धमाके दार thumbnail भी बनाने वाला हू�
8:02
तो वो भी दिखेगा आपको और अगले वीडियो में मिलते हैं फिर तब तक के लिए आप लोग अपना ध्यान रखना थैंक यू सो मच गाइस पू वाचिंग इस वीडियो एंड आवल सी यू नेक्स टाइ�
#Flash-Based Entertainment
#Fun & Trivia