Up next in 10
Link component in Next.js - Understanding next_link _ NextJs Tutorial for Beginners #9
Feb 13, 2024
The ninth tutorial video in the series, "Link component in Next.js - Understanding next_link," provides beginners with a comprehensive overview of the `<Link>` component in Next.js. This essential component facilitates client-side navigation between pages in a Next.js application while preserving the benefits of server-side rendering. Viewers will gain an understanding of how to use the `<Link>` component to create navigation links between different pages within their Next.js projects. The tutorial covers various aspects of the `<Link>` component, including its props, such as `href` and `as`, and how to utilize them for dynamic routing and URL handling. By mastering the `<Link>` component, beginners can create seamless and efficient navigation experiences in their Next.js applications, enhancing overall user experience.
Show More Show Less View Video Transcript
0:00
अगर हलका फुलका भी आईडिया होगा न आप लोगों को React का
0:02
तो आप लोगों को पता होगा कि एक पेज़ से दूसरे पेज़ का नाविकेशन और React JS के अंदर कभी-कभी कितना जाता पेंफुल हो जाता है
0:09
ये चीज नेक्स JS में बहुत अच्छी तरह से सॉल्व की गई है, सबसे पहले तो हमारे पास फाइल बेस रूटिंग है
0:15
वो तो आप लोगों मैंने बता दिया था, वो तो आप सबको बता है, लेकिन अब एक पेज़ से दूसरे पेज़ में अगर आपको जाना है
0:20
तो नेक्स JS परतान करता है एक link component, जो की next slash link से आप लोग बड़े अराम से import कर सकते हों
0:26
और इसको use कर सकते हों, सिर्फ इतना ही नहीं, आप लोग अगर एक पेज़ से, अपनी website में एक पेज़ से
0:31
किसी दूसरी website में, किसी दूसरे इंसान की website, लेट असे मेरी website codewithari.com को आप link करना चाते हो
0:37
तो अपना वो जो पुराना A tag है, और good old A tag, वो आप अभी भी इस्तेमाल कर सकते हों
0:44
तो देखेंगे इस वीडियो के अंदर, कि किस तरह से ये next.js का link
0:48
जो component है, वो different है, हमारे HTML के anchor tags हैं
0:52
और कब anchor tag यूज़ करना चाहिए, कब link tag यूज करना चाहिए, ये चीज मैं discuss करूंगा इस वीडियो के अंदर
0:58
चलते हैं computer screen के अंदर, और देखते हैं इन सब concepts को. मेरे ब्लॉग देखा ही पढ़ रहा है, मैं एक काम यहाँ पर जल्दी से करूंगा
1:14
मैं आपका रखूंगा, yarn run, और sorry, yarn dev, रन क्यो लिख रहा हूं मैं, yarn dev, वैसे मैंने yarn run लिखा थे
1:22
आपका लिख रहा है, आपका लिख रहा है, आपका लिख रहा है, आपका लिख रहा है, आपका लिख रहा है
1:26
आपका लिख रहा है, आपका लिख रहा है, आपका लिख रहा है, आपका लिख रहा है
1:30
आपका लिख रहा है, आपका लिख रहा है, आपका लिख रहा है, आपका लिख रहा है
1:34
आपका लिख रहा है, आपका लिख रहा है, आपका लिख रहा है, आपका लिख रहा है
1:38
आपका लिख रहा है, आपका लिख रहा है, आपका लिख रहा है, आपका लिख रहा है
1:42
आपका लिख रहा है, आपका लिख रहा है, आपका लिख रहा है, आपका लिख रहा है
1:46
आपका लिख रहा है, आपका लिख रहा है, आपका लिख रहा है, आपका लिख रहा है
1:50
आपका लिख रहा है, आपका लिख रहा है, आप बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहु��
2:22
बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बहुत बह��
2:52
यानि कि जो डेटा था हमारे पेज़ का वो यहाँ पर पॉपलेट हो गया ठीक है तो यहां बार आप लोग देख सकते हूँ एंटरप्राइज पर मैं क्लिक करूंगा अगर तो यह एंटरप्राइज में भी आ गया मैं आप देखो फीचर्स पर क्लिक करूंगा प्रीवि��
3:23
यह जो मेरा हेडर था का गया मेरा हेडर यह रहा मेरा नैफ के अंदर था हेडर यह जो एलाई है इसके बाहर मैं क्या करूंग��
3:30
मैं कुछ इस तरह से link यूज़ करूंगा थीक है अब यहाँ पर मैं link यूज़ कर रहा हूँ त��
3:34
amit abbreviation आ रही है मुझे सबसे पहले यहाँ पर next link में से link क��
3:38
import करना पड़ेगा कुछ इस प्रकार से जैसे कि आप लोग देख रहे ह��
3:42
link और जैसे मैं link लिखोंगा आप लोग देखो इसके अंद��
3:54
मैं home को डाल सकता हूँ टीक है अब यहाँ पर जैसे मैं लिंक लिख��
3:58
मैं यहाँ पर लिखोंगा href is equal to और मैं यहाँ पर लिखने वाला हू��
4:02
आप लोग देखो यहाँ पर जैसे मैं about लिखोंगा और मैं about पर लिख करूँग��
4:12
मैं यहाँ पर क्लिक नहीं कर पा रहा हूं कर पा रहा हूं बड़ यहाँ पर cursor pointer मैंने नहीं किया हुआ है जो कि मैं कर दूँगा ठीक है तो यहाँ पर आप देख रहे हो��
4:17
कि ए मैंने टाग यूज नहीं किया मैंने link tag का इस्तिमाल किया मैंने home में about कर दिय��
4:23
मैं एक काम करता हूँ जल्दी से इसको ठीक करता हूँ मैं सबसे पहले क्या करूँगा इसको copy करूँगा इसको copy करने के बाद यहाँ पर मैं Alt Shift दबा कर यहां तक ले कर जाओंगा और इसको paste करूँग��
4:32
और यह जो मेरे link tag से हैं को Ctrl X करके मैं at the end paste करूँग��
4:38
अब मैं यहाँ पर individually लगा दूँगा about, individually यहाँ पर मैं लगा दूँगा blog, individually यहाँ पर मैं लगा दूँगा contact
4:45
तो यह नहीं पर नहीं पर नहीं पर नहीं पर नहीं पर नहीं पर नहीं पर नहीं पर नहीं पर नहीं पर नहीं पर नहीं पर नहीं पर नहीं पर नहीं पर नहीं पर नहीं पर नहीं पर नहीं पर नहीं पर नहीं पर नहीं पर नहीं पर नहीं पर नहीं पर नहीं पर नहीं ��
5:15
तो यह नहीं पर नहीं पर नहीं पर नहीं पर नहीं पर नहीं पर नहीं पर नहीं पर नहीं पर नहीं पर नहीं पर नहीं पर नहीं पर नहीं पर नहीं पर नहीं पर नहीं पर नहीं पर नहीं पर नहीं पर नहीं पर नहीं पर नहीं पर नहीं पर नहीं पर नहीं पर नहीं ��
5:45
तो यह अपना करसर लेकर जाओंगा आप देखो जीये home, about, back करूंगा, blog, back करूंगा, contact ठीक है ये कुछ इस तरह से आ गया ठीक है तो मैंने अभी क्या किया कि link tag का इस्तेमाल किया अब अगर मैं यहाँ पर link component actually link is not a tag it's a next JS component ठीक है link component तो मैं link component की documentation पे आओंगा तो मु��
6:15
नहीं जाता है अधि टॉप वो काम करता है इन most of the cases बड़े आप लोगो एक चीज बताता हूँ कि कभी-कभी हम लोगो को बहु��
6:22
complex application मनानी होती है complex का मतलब यह नहीं है कि उसको समझना मुझकल है complex का मतलब कि आपका use case
6:27
complex है उस case में आप लोग सबसे पहले उस particular component की documentation में देखों कि क्या-क्या चीजे है देखो href तो आप use करोगे-करोगे as optional decorator for the path that will be shown in the browser URL path bar तो ये तोड़ा सा advanced usage हो गया ठीक है pass href, pre fetch ठीक है अब क्या मैं इस सब रटके बेटा हूँ विश्वासिली नहीं मैं इस सब रट��
6:57
use एक particular technology को तो मुझे याद हो जाती है यह सब चीजे ठीक है जैसे href मुझे याद हो गय��
7:02
link पर href होता है मुझे याद हो गया मुझे याद अगर नहीं होता तो मैं यहां से देखता next के अंदर एक link component होता है यह पता होना ही अपने आप में बहुत बड़ी चीज��
7:10
क्योंकि अगर आप लोगों पता है next के अंदर link component होता है तो आप यह कर सकते हैं क्या कर सकते हैं Google search कर सकते हैं ठीक है तो next year's के link वाले page पर एक बार आप आ ग��
7:18
तो आप लोगों सब कुछ मिल जाएगा अब इसके अंदर एक और option जो कि मुझे बहुत ज़ादा useful मैं कहूंगा लगता ह��
7:24
वो है scroll is equal to true या false यह क्या करता है मैं आपको बताता हूँ आप scroll is equal to false करके जब भी एक नए link पर क्लिक किया जाता है तो आप disable कर सकते ह��
7:33
इसलिए आप लोग तब करोगे जब आपके जो दो pages हैं वो एक दूसरे में link हो रहे हैं इसलिए आप लोग तब करोगे जब आपकी पूरी overall application है वो connected है फ़र इंजामबल अगर आप लोग facebook जैस��
7:45
एक social media network बना रहे हो तब आप लोग क्या करोगे आप नहीं चाहोगे कि at the top सक्रॉल हो जाए अगर किसी ने chat पर क्लिक किया या फिर आप कोई दूसरा component लोड कर रहे हो तो एक component लोड करते वक्त आप नहीं चाहोगे कि at the top सक्रॉल कर दिया जाए तो I hope कि आप लोग ��
8:15
कि आप नहीं चाहोगे कि आप नहीं चाहोगे कि आप नहीं चाहोगे कि आप नहीं चाहोगे कि आप नहीं चाहोगे कि आप नहीं चाहोगे कि आप नहीं चाहोगे कि आप नहीं चाहोगे कि आप नहीं चाहोगे कि आप नहीं चाहोगे कि आप नहीं चाहोगे कि आप नही��
#Performing Arts
#Programming