In the seventeenth tutorial video, "Introduction to API Routes in Next.js," beginners are introduced to the concept of API routes and how to implement them within a Next.js application. The tutorial covers the basics of creating API routes, which enable developers to build server-side functionality directly within their Next.js projects. Viewers learn how to set up API routes to handle HTTP requests such as GET, POST, PUT, and DELETE, and how to respond with JSON data. Additionally, the tutorial may include examples of using API routes to fetch and manipulate data, interact with databases, or integrate with external services. By mastering API routes in Next.js, beginners can enhance the capabilities of their applications by implementing server-side logic seamlessly alongside their client-side code.
Show More Show Less View Video Transcript
0:00
याते हैं, इस course के starting में मैंने आपको बताया था कि Next.js एक frontend का framework है और backend का framework है, वहाँ हमने discuss किया था, कि Next.js दोनों का framework है, frontend का तो है ही है, backend का भी framework है, और आज हम इस चीज़ की पुष्टी करने वाले हैं, हम लोग देखेंगे किस तरह से Next.js के अंदर API roots को बनाया जा सकत��
0:30
जाएगा हम लोग देखेंगे कि इस pages के अंदर के API folder के अंदर भ��
0:34
file-based routing किस तरह से काम करती है हम लोग JSON response को अपन��
0:38
browser में देखेंगे और उसके बाद हम लोग देखेंगे कि किस तरह से आप लोग use कर सकते हैं इन API endpoints को request and response object क��
0:45
किस तरह से modify और access करना है ये सब हमepd देखेंगे चलते हैं computer screen पर और start करते है��
0:52
अपनी api की introduction को let's get started with the video तो यार अब हम लोग यहाँ पर देखने वाले है कि किस तरह से हम लोग इस data को serve करेंगे हम लोगों ने ये json files तो बना लिय��
1:11
तो यहां पर नेक्स्ट जीएस की जो प्लेलिस्ट आप सबने अक्सेस कर ली होगी मैं जल्दी से यान डेव लिख देता हूं ताकि हम सबका टाइम बचा रहा है किसी का टाइम वेस्ट ना हो यान डेव लिखने के बाद मैं इस ब्लॉग को खोल भी लूंगा और आप लोग ��
1:41
इस ब्लॉक डेटा के अंदर यह रही यह जैसे यह जैसे और यह जैसे मैं चाहता हूं कि मुझे देखने को मिले जब भ��
1:49
करेस्पॉर्टिंग लग को हिट किया जाता है तब ठीक है अब देखो यह काम कैसे किया जाएगा आज मैं आप लोगों को यहा��
1:55
नेक्स जीएस की एपीआई से मिलवाना चाहता हूँ अगर आप लोगों ने ये पेजेस फोल्डर देखा होग��
1:59
तो यहाँ पर एक एपीआई फोल्डर होता है ठीक है एपीआई फोल्डर के अंदर कुछ ऐसी चीज़ों होती है��
2:03
जो कि अभी तक हमने छोई नहीं हमने बात करी थी कि नेक्स जेस एक फ्रंट एंड का फ्रेमवर्क है या फिर नेक्स जेस एक बैक एंड का फ्रेमवर्क ह��
2:10
मैंने आप लोगों को बताया था कि next.js जो है वो दोनों का framework ह��
2:14
frontend का भी framework है और backend का भी framework है code pages about block contact
2:47
ठीक है, मैं क्या करूँगा, API लिखूँगा, slash, hello लिखूँगा, ठीक है, और यहाँ पर name John Doe, यानि कि यहाँ पर, जो चीज लिखी गई है, वो यहाँ पर return होकर मिल गई है, तो next.js इस प्रकार से back-end का framework बन चुका है, यानि कि मैं, यह API roots जो है, वो use कर सकता हूँ, यहाँ ��
3:17
कर सकते हैं नेक्स्ट जेस के तरू ठीक है अगर आप लोग पूछे फ्रंट एंड का है इस यह बैक एंड का है त��
3:22
नेक्स्ट जेस जो है वह दोनों का फ्रेमवर्क फ्रंट एंड का भी फ्रेमवर्क है बैक एंड का भी फ्रेमवर्क है य��
3:26
हम लोग यहाँ पर देख चुके हैं ठीक है तो बैक एंड का कोड लिखेंगे ओविसली मैं यहां पर जॉ��
3:30
डो हटाकर हैरी भाई कर दूंगा हैरी भाई कर दूंगा इसको सेव करूंगा तो आप लोगों को यह चेंज यहां प��
3:35
टो दो दिख जाएगा मैं रिलोड करूंगा तो ठीक है अब अगर मैं यहां पर जैसन फॉर मैटर नामक एप्लीकेश��
3:42
सॉरी एक्स्टेंशन इंस्टॉल करूं तो आप लोगों यहां पर दिखेगा कि एड टू ख्रोम में कर देता हूं ए��
3:50
extension कर देता हूं यह एपिएई रूट्स जो है जो भी मेरा जैसे आफ पूट आएगा वह बहुत अच्छी तरह से ब्यूटिफाइ��
3:55
कर दिखेंगे जैसे तरह ठीक है जो यह पर देखो रॉड इटम में देख सकता हूं पार्ट्स टेट भी देख सकता हूं त��
3:59
पर मैं इस तरह से इसको open close कर सकता हूँ, और काभी convenient हो जाती है यह चीज़े, ठीक है
4:03
तो यहाँ पर हम लोग जो है, endpoint को access कर सकते हैं, लेकिन
4:07
मैं अब क्या करना चाहता हूँ, मैं चाहता हूँ कि यार मेरे blogs दिखें, और मैं specifically यह चाहता हूँ कि
4:12
अगर मैंने यहाँ पर slug डाल दिया यानि कि किसी भी तरह स��
4:16
मुझे slug पता चल गया तो मैं fetch करना चाहूँगा अपने उस block का content
4:20
यानि कि जैसे अगर मैंने how to learn flash डाल दिया तो मैं चाहूँगा title मुझे मिल जाए content मिल जाए author
4:24
मिल जाए यह तीन चीजें एक बार मुझे मिल जाती है तो मैं क्या करूंगा यह रिटर्न कर दूंगा जेसन की फॉर्म में त��
4:30
मुझे यहां ली फाइल डिट करके बेसिकली डिटर्न करनी है ठीक है इतना करना है बस मुझे ठीक है तो यह काम मैं कैस��
4:35
console request response log console
4:50
आप लोग guess करो नीचे मुझे comment में बताओ क्या मुझे देखने को मिलेगा या नहीं मिलेगा और फिर उसके बाद हम लोग देखेंगे कि मिलागी नहीं देखने क��
4:56
और पोस करके सब लोग कमेंट जरूर करना मैं वेट कर रहा हूँ आप लोग के कमेंट्स क��
5:00
I hope सबने कमेंट किया होगा और मैं आप लोग को बता देता हूँ कि यहाँ पर console में कुछ देखने को नहीं मिलेग��
5:05
और उसका reason पता है क्या है उसका reason यह है कि यह जो API ह��
5:09
वो एक back-end की API है तो जो भी मैं console में लिखूँगा वो मुझे यहाँ देखने को मिलेग��
5:13
आप लोग देखो मेरे back-end में देखने को मिलेगा यह user को नहीं दिखेगा, मैं user को पूरी request नहीं दिखाना चाहता हूँ
5:19
और मैंने गलती से यहाँ पर console.log डाल दिया, अगर आप next.js को छोड़ दो एक मिनट के लिए
5:24
अगर आप node.js में APIs बनाते हो, कोई भी mon app लिखते हो, तो वहाँ पर आप लोगों को जो console log है वो कहाँ पर दिखाई पड़ता ह��
5:31
वो आप लोगों को यहाँ पर दिखाई पड़ता है अपने back end मे��
5:35
यानि कि अपने private server में ना कि अपने browser में ठीक है तो वही चीज यहाँ पर हमें देखने को मिल रही है आप देखो यहाँ पर इसमें बहुत सारी चीज़ें हैं और इसको यहाँ प��
5:45
इनस्पेक्ट करना थोड़ा सा मुश्किल हो रहा है कि इसमें इतनी सारी चीज़ें हैं रिक्वेस्ट ऑब्जेक्ट में कि पता नही��
5:51
बड़ा हुआ इसमें ठीक है तो यह सारी की सारी चीजें आप लोग देख सकते हो चाहो तो इसको प्रेटी प्रिंट भी कर सकत��
5:56
हो ठीक है और यहां पर अगर मैं इसको प्रेटी प्रिंट करना चाहूं तो कोई चीजें कर सकता हूं मैं कुछ इस तरह स��
6:02
जा सकता हूं इसको अ चेसन डॉर्ड स्ट्रिंग इफेक्ट मैं इसको राइट कर सकता हूं बिसीएल फाइल में नहीं करूंग��
6:11
ठीक है तो रिक्वेस्ट ऑब्जेक्ट को जिस तरह से हमने देखा उस तरह से में रिस्पॉन्स ऑब्जेक्ट को भी देखेंग��
6:16
तो जो हमारा response object है वो कुछ इस तरह से दिखाई पड़ेगा मैं hit करूँगा इसको एक बा��
6:21
hit करूँगा तो यहाँ पर ये response object मुझे दिखाएगा तो ये मेरा response object है ठीक ह��
6:25
जिस तरह से request object मुझे दिखा उसी तरह से response object में मुझे दिख गया अब आ��
6:30
आप लोग देखो response में कई चीजें हैं और ये सारी की सारी चीजें जो है आप लोग देख सकते ह��
6:35
और इसको प्रेडिप्रेइंट करके एक फाइल में राइट करके इसको और डीपली इंस्पेक्ट कर सकते ह��
6:40
वो मैं काम आम के ऊपर छोड़ता हूँ यहां से वॉपी पेस्ट करके भी एक फाइल में ले जा सकते हो उसको डॉट जेस��
6:44
फॉरमेट में सेव कर लो ठीक है और उसके बाद देख लो जावास्क्रिप्ट ऑफिट को बट अभी के लिए हम लोग आगे बढ़ेंग��
6:49
और इस चीज को स्किप करेंगे बट आप लोग इस तरह की जीज कर सकते हो इसको मैं कमेंट आउट कर देता हू��
6:55
अब यहाँ पर एक बात और आप लोगों को जो बताना मैं चाहूंगा वो यह है कि आप लोग यहाँ पर फाइल बेस रूटिंग देखते ह��
7:00
application about slash about about application
7:15
वाले जो ब्लॉग्स है वह देखने को मिल जाएंगे श्लाइट ब्लॉग है तो मुझे यह ब्लॉग डोट जएस रेंडर होकर मि��
7:20
जाएगा उसी तरह एपीआई में भी चलता है अगर मैं यहां पर एक नई फाइल बनाऊं और मैं आपको लिख द razor.js औ��
7:26
एक्जाक्टली एक चीज करूंगा जो है लोग जेस के अंदर है एक्जाक्टली यह चीज में करूंगा और अगर मैं आप लोगो��
7:32
दिखाऊं यहां पर मैं जरा कुछ स्क्रीन का स्मूट कर लेता है उसको बड़ा कर लेता हूं ठीक है तो यहां पर देख��
7:38
लोग रेस्ट और स्टार्टस डॉट जेसन यह लिखा हुआ है और अगर मैं यहां पर सिर्फ इंडेक्स पर जाऊंगी मुझ��
7:44
इंडेक्स डॉट जेस लिखने की भी जरूरत नहीं है सिर्फ स्लाश एपीआई पर जाऊं तो आप लोग देखो यह बाया गय��
7:49
चेंज कर देता हूं मैं इसको कर देता हूं दिसेस इस माय होमपीज ठीक है और जिसमें होमपेज लिखकर रिलोड कर��
7:59
तो देखो जिसमें होमपेज लिखकर आ रहा है और यह जो स्लाश स्लाश ब्लॉग नहीं स्लाश हेलो वाली एपिएई वह बिल्कु��
8:05
चेंज टेटी के अब यहां पर आप लोग गेट रिक्वेस्ट पोस्ट रिक्वेस्ट पुट रिक्वेस्ट कई-कई चीजें लगा सकत��
8:11
एकदम आप ऐसा समझ लो कि मन स्टैक आपको मर्ड में अपनी एपिएइस लिखने की जरूरत नहीं आप यहीं पर कर सकत��
8:16
सारी एबिएइज आप यहाँ पर ला सकते हो यहाँ पर लागे डाल सकते हो ठीक ह��
8:20
I hope समझ में आ गया आप लोगों को और मज़ा आ रहा हो आप लोगों को इस course मे��
8:23
आप लोगों को पता चल गया होगा कि इस तरह से इस तरह के JSON endpoints को बनाया जा सकता है अगर आप लोगों ने मेरा react का course देखा है by any chance तो वहाँ पर हम लोगों ने एक mern application बनाई थ��
8:31
react का course मेरा काफी content rich था उसमें मैंने कई चीज़े आप लोगों को बताई थ��
8:37
बहुत सारे projects करे थे बहुत सारे लोग उसकोă लेंदी भी बोलते हैं कि यार बहुत लेंदी कर दिया यार इतना सारे projects
8:42
पर मेरे साथ पर projects से यार clarity आती है तो projects आप लोग जब तक नहीं बनाओगे तो अपनी clarity नहीं आईग��
8:47
तो हमने कई बार कई चीज़े करी थी यहाँ पर और मैंने वहाँ पर आप लोगों क��
8:51
बहुत सारी चीज़े बताई थी react के बारे में और वहाँ पर हमने monstack भी देखी थी कि react को monstack से कैसे connect करना ह��
8:56
यहाँ पर आप लोगों को अलग से APIs बनाने की ज़रूरत नहीं है note js में आप यहीं पर बना सकते हो तो आप लोग playlist जरूर access कर लेना react की चाहो तो कर लेन��
9:05
but next js की जरूर से कर लेना अभी के लिए इस वीडियो में इतना है guys thank you so much guys for watching
9:09
this video and I will see you next time करते है��
