Up next in 10
Head and Script Component in Next.js _ NextJs Tutorial for Beginners #6
5 views
Feb 13, 2024
The sixth tutorial video in the series "Head and Script Component in Next.js" focuses on introducing the concepts of the `<Head>` and `<Script>` components in Next.js. These components play crucial roles in managing metadata and injecting scripts into the HTML `<head>` of Next.js applications. Viewers learn how to utilize the `<Head>` component to customize metadata such as titles, descriptions, and stylesheets, improving SEO and enhancing user experience. Additionally, the tutorial demonstrates how to use the `<Script>` component to efficiently incorporate external scripts, such as analytics or tracking codes, into Next.js projects. By mastering these components, beginners can optimize their Next.js applications for better performance and accessibility while maintaining clean and organized code.
View Video Transcript
0:00
आप चाहें किसी भी framework में चले जाओ, किसी भी library को use कर लो
0:04
लेकिन होता क्या है, जो HTML, CSS, JavaScript में लिखा हुआ code होता है, वो एकदम आपके दिमाग में गुशता है, कि यह है HTML, CSS styling कर रही है
0:11
JavaScript client side logic लिख रही है, head के अंदर मुझे डालना है title, head के अंदर मुझे add करनी है CSS
0:16
वो एक clarity रहती है एकदम clear picture बन के रहती है हमारे दिमाग के अंद�
0:20
लेकिन कभी कभी हम लोग ये चाते है कि हम लोग अपने head के अंद�
0:25
डाल दें कुछ चीज़ों को पर हम होते हैं Next.js के अंदर है या Next.js के अंदर तो pages folder होता ह�
0:30
जो की react component export करता है वहाँ पर मुझे head कैसे मिलेग�
0:34
वहाँ पर तो मैं simply react component लिख देता हूँ और वो मुझे export होके मिल जाता ह�
0:38
लेकिन next.js ने आप लोगों को भी खुश रखने का इंतजाम किया हुआ ह�
0:43
क्योंकि next.js प्रोवाइड करता है एक head component जिसकी साहिता से एक पेज के लिए head tag को directly
1:03
edit करना हम लोगों के लिए आसान मनाता है इससे हम होते तो next.js क�
1:07
शक्तियों के अंदर हैं लेकिन हमको वो good old HTML, CSS और JavaScript वाली feel
1:13
आती है वो feel हमारे अंदर बरकरार रहती है तो ये सारे काम code मे�
1:17
किस तरह से करना है चलते हैं computer screen में और मैं ये सारे की सारी चीज़े आप लोगों को explain करके बताता हू�
1:22
let's get started with this video तो यार अगर आप लोग follow कर रहे हो next.js का course
1:36
तो आप लोगों को पता होगा हम लोगों को ने मनाया hunting quarter जो की काफी धमाके दार ब्लॉग बनने वाला है let me tell you
1:41
लेकिन आज के इस वीडियो का मुद्दा है next का head क्या होता है next head
1:45
बाद अभी एक चीज़ मैं आप लोगों को बताना चाहता हूँ कि मैंने क्या खोल दिया मैं खोलना चाहता था ये वाला folder
1:51
शेर मैंने ये वाला folder खोला था open with code ओके, तो यही वाला folder मैंने खोल लिया है दुबारा से
1:57
मैं आप लोगों को यह बताना चाहता था, कि जो सारा का सारा source code है, वो एक GitHub repository पे मैं डाल दूँगा
2:02
और उसको upload कर दिया जाएगा, GitHub repository पे, एक मिनट, मैं git log करता हूँ
2:07
तो बाद आपको गेट आने की जरूरत नहीं है, मैं जैसे जैसे टूटोल्स आगे बढ़ते जा रहे हैं, टूटोल्स 5, टूटोल्स 5 तक मैंने जो है डाल दिया comment
2:15
आपको गेट आने की जरूरत नहीं है, आता है तो बहुत अच्छी बात है, ठीक है, बट इस course के लिए घिटाने की ज़रूरत नहीं ह�
2:20
let me tell you अब मैं क्या करूँगा यहाँ पर आप लोगों को next head के बारे में बताऊंग�
2:24
कि next head क्या होता है लेकिन उससे भी पहले मैं आप लोगों को यहाँ प�
2:28
yarn dev लिखकर server चला कर दिखा देता हूँ next head next js starter template import head use restart server
3:09
कि head is not defined ठीक है यह head use कहां पर हो रहा है line number 8 पर जाते हैं line number 8 पर और देखते हैं यहाँ पर क्या किया जा रहा ह�
3:15
इस head के साथ इस head के अंदर title है और उसके अंदर hunting
3:18
coder है अगर आपको html आती है जो कि आनी ही चाहिए या�
3:22
यहां पर दिखाई पड़ रहा था यहां पर दिखाई पड़ रहा था यहां पर दिखाई पड़ रहा थ�
3:52
name is equal to description, content is equal to generated by create next app
3:58
और ये जो पूरा का पूरा हमारा title, meta, description, content is equal to ये
4:03
ये पूरा का पूरा ऐसे आ गया है, ठीक है, तो यहाँ पर आप लोग देख सकते हो कि जो head होता है HTML का
4:09
उसके अंदर content इसने inject कर दिया है, ठीक है, तो कभी भी हमें head tag के अंदर, जो HTML का head tag होता है, हमारे page का head tag होता है, उसके अंदर हम inject करना है कुछ भी, हम next का head इस्तेमाल कर सकते हैं, क्या हम ये काम javascript से कर सकते हैं, obviously कर सकते हैं, title को set किया जा सकते हैं, अगर आप लोग react से आते हैं, तो आप लोग javascript से ही title set करते थे, �
4:41
जो हमारी template होती है उसके द्वारा ठीक है वो by default करता है इस्तेमाल इसका अब यहा�
4:46
पर आप लोग देखो यह चीज और यह चीज हमारे HTML head के अंदर जाएगी और अगर आप लोग यह सोच रह�
4:52
कि इतना compressed क्यों है तो for SEO reasons यह compressed कर देता है अब यह line wrap को मैंन�
4:57
आन कर लिया तो ये कुछ इस तरह से दिखा रहा है यानि की यहाँ पर scroll bar नहीं आ रहा है horizontal वाला जो scroll bar मुझे अभी देखने को मिल रहा था तो चलो यार ये चीज तो आप लोगो क्लेर हो गई कम से कम की यहाँ पर हमारा जो head tag होता है उसके अंदर हमें कुछ भी inject करना है तो �
5:27
search console का code मानो हमें किसी ने भी code दिया कहा कि यार ये javascript अपने इस वाले page पे डाल द�
5:33
तो मैं क्या करूँगा तो मैं कैसे डालूँगा javascript कहीं भी अपने किसी भी page मे�
5:37
let us say मैं यहाँ पर एक javascript डालना चाहता हूँ और वो javascript let us say
5:42
कुछ भी करती है I don't know तो मैं क्या करूं क्या करूं कहां पर डालूं पब्लिक में डालता हूं एक जावास्क्रिप्ट और सीधों ज्ञान के नाम स�
5:50
यह क्या करेगी कंसोल डॉट लॉग हेलो करेगी और कंसोल डॉट नहीं एलर्ट करूंगा कि मैं बहुत लेजी हूं या�
5:57
script src script emmet
6:10
script src is equal to और मैं यहाँ पर लिखूंगा slash sc.js ठीक ह�
6:16
और यहाँ पर script आ गया देखो अब मैं save करूँगा खोलूँगा इसको देखो hello
6:21
तो यह script यहाँ पर मैं run कर सकता हूँ ठीक है यहाँ पर मैं script add कर सकता हू�
6:25
जैसे कि आपने देखा है, यह sc.js रन हो रही है यहाँ पर, जब sc.js हो रही है, तो Google Ads, Google ytics, कुछ भी हम लोग add करेंगे, किसी भी तरह की JavaScript add करेंगे, वो भी run होगी, मानते होगी नहीं मानते हो, नहीं मानते हो तो मानना पड़ेगा, ठीक है, तो होगी वो run, अब अगर मैं चा�
6:55
आप ये चाहोगे नहीं कि किसी third party छोटी मोटी ytics use करने के चक्कर में आपका पूरा page इसलो हो गया
7:02
पहले तो आपके users है न, आप चाहोगे कि आप अपने users को पहले रखो, आपका user अगर अच्छी तरह से service ले पा रहा है आपकी website की
7:11
या फिर content को consume कर पा रहा है वो सबसे बड़ी चीज होती है तो क्या होता है next.js मे�
7:15
एक script component होता है ठीक है जो कि हम लोग import कर सकते हैं from next
7:18
slash script next slash script ठीक है और ये script component कुछ इस तरह से काम करता ह�
7:26
मैं script को कुछ इस तरह से लिखूंगा ठीक है और यहाँ पर script जो ह�
7:41
इस एकॉल टू और एस्ट्राश एसी डॉट जेस ठीक है यह मैं आप लोगों दिखाता हूं ठीक है और इसको मैं फिर यहां स�
7:49
हटा दूंगा अब मैं सेव करूंगा तो देखो अभी भी वही हो रहा जो पहले हो रहा था तो यहां पर बदला क्या स्क्रिप्�
7:55
कंपोनेंट कंपोनेंट नेक्स्ट जेस उसके बाद भी गलती लिख दी स्पेलिंग मैंने कोई बात नहीं अब यहां प�
8:02
देखो नेक्स्ट क्रिप्ट कुछ इस तरह से इंपोर्ट किया जा सकता है यह स्क्रिप्ट कंपोनेंट की डॉक्यूमेंटेश�
8:08
और यहाँ पर इन्होंने इसके कुछ बारे में बताया इस ट्रैटेजी क्या है उसकी है लेजी लोड यानी कि ज�
8:21
खाली टाइम बचेगा जब सारे काम निपट चुके हैं उसके बाद लोड होगी आपके स्क्रीप मोस्ट ऑफ द यह यूज करन�
8:27
होगे before interactive load before the page is interactive after interactive load immediately
8:32
after the page becomes interactive तो ये by default होता है देखो bracket पे लिखा हुआ है त�
8:37
मैं strategy is equal to lazy load लगाऊंगा अगर तो जब मेरा पूरा का पूरा document जो है व�
8:43
render हो जाएगा अच्छी तरह से उसके बाद ये script जो है load होगी ठीक है अब यहाँ पर य�
8:49
आपको बता नहीं चलेगी, SC.js में, लेकिन believe me, believe me, अगर आप लोग add करोगे
8:54
कोई third party script, वो आपके page को, कभी-कभी slow बना देती है, जो कि third party script
8:59
को आपसे कोई मतलब नहीं है, आपका page fast हो रहा है, slow service script slow lazy load
9:11
आप कैसे करो वह नहीं बताएंगे आपको प्लेन एंड सिंपल जावा स्क्रिप्ट से भी यह चीज की जा सकती है बट मैं आपको बता रहा हूं कि नेक्स्ट जाएगा यह काम आप इस तरह से बड़े आराम से कर सकते हो तो भाई हम तो जो है लेजी लोडिंग करने वाले हैं �
9:41
टैक के अंदर हेड के अंदर मत डाल देना हेड के अंदर मत डालना स्क्रिप्ट कभी भी स्क्रिप्ट टैक क�
9:45
इस्तेमाल करो ठीक है डेंजरसली सेट इनर एसटीएमल एक प्रॉबर्टी होती है उसके बारे में आगे देखेंग�
9:50
ठीक है, अभी के लिए बहुत जादा हो जाएगा, बट सब कुछ उपलब्द होता है यहाँ पर
9:54
documentation अभी आपको समझ में नहीं आईगी, अगर आपको एक beginner हो, लेकिन जब आप थोड़े बहुत intermediate
10:01
कहीं न गई advanced level की तरफ जाने लगोगे, तब आप इसको पढ़ोगे और आपको समझ में आग�
10:05
यह क्या कहे रही है जब आपको पता चलेगा next.jscrypt component यह is an extension of html script
10:09
अब किसी को पता है नहीं html script tag क्या होता है तो वो कहेगा यार यह क्या गया लिख दिय�
10:13
समझ रहे हैं मेरी बात को मैं क्या कह रहा हूँ यहाँ पर आते हैं बापस से अपने code के अंदर और आप देख�
10:17
यहाँ पर script src is equal to यह लिखा strategy is equal to lazy ओनलोड लिख�
10:20
और यह जो है script हमारी काम करेगी मैं इसको reload करके दिखाता हूँ आप लोग क�
10:25
ठीक है यहाँ पर देखो hello और यह यहाँ पर काम करेग�
10:29
और हमने यहाँ पर head को भी अच्छी तरह से configure कर लिय�
10:33
script को भी configure कर लिया image के बारे में हम लोग देखेंगे आने वाले videos मे�
10:37
but अभी के लिए I hope कि head सबको समझ में आ गया किस तरह से लिखना है अब meta एक keyword भी होता है ठीक ह�
10:42
meta name is equal to keywords और यहाँ पर आप लिख सकते हो next
10:47
next blog ठीक है hunting coder मैं next blog नहीं लिखूँगा hunting coder blog लिखूँगा hunting coder
10:57
और next js लिख दूँगा ठीक है save करूँगा और यहाँ पर अगर मैं आ�
11:04
इसको reload करूँ, तो आप लोग देखना है यहाँ पर, मैं line wrap कर देता हूँ, ताकि यह पूरा का पूरा दिखे
11:08
लाइन रैप समझ रहोगे न, आप देखो, आप समझ रहोगे, अगर पहले नहीं समझ रहे थे, यह scroll bar नहीं दिखेगा
11:13
यह पूरा wrap करके यहाँ पर दिखा देगा मुझे ठीक है तो I hope क�
11:17
यह सब clear है सबको दिख रहा है कि हमारे keywords किसी को हाँ ही देखो metanym is equal to
11:21
keyword यहाँ पर आ गया तो कोई भी चीज अगर आप लोग directly inject करन�
11:25
चाते हो head के अंदर अपनी HTML page के head के अंद�
11:29
तो इसकी साहता से कर सकते हो ठीक है तो अबी के लिए इस वीडियो में इतना है या�
11:33
Next.js की जो हमारी playlist है उसको जरूर access कर लेना आप लो�
11:36
और मैं यहाँ पर सारी के सारी चीज़े आप लोग के लिए आसान बनाने के लि�
11:40
पूरी की पूरी कोशिश कर रहा हूँ अपनी I hope की मैं बना पा रहा हूँ I hope की आपको पसंद आ convenient
11:45
वीडियो में इतना है गाइस थैंक ये सो मच गाइस पर watching इस वीडियो एंड आवेल सी यू नेक्स्ट टाइ�