Rendering HTML text using dangerouslySetInnerHTML in Next.js _ NextJs Tutorial for Beginners #24
Feb 13, 2024
In the twenty-fourth tutorial video, "Rendering HTML Text using dangerouslySetInnerHTML in Next.js," beginners are guided through the process of rendering HTML content within their Next.js applications using the `dangerouslySetInnerHTML` attribute. This tutorial focuses on scenarios where content containing HTML tags needs to be displayed dynamically, such as user-generated content or content fetched from an external source. Viewers learn how to use `dangerouslySetInnerHTML` to inject HTML directly into React components while being aware of the potential security risks associated with this approach. Additionally, the tutorial may cover best practices for sanitizing and validating HTML content to mitigate security vulnerabilities. By understanding and applying `dangerouslySetInnerHTML`, beginners can effectively render HTML text within their Next.js applications while maintaining security and performance standards.
Show More Show Less View Video Transcript
0:00
आज के इस वीडियो में हम लोग देखेंगे react का एक feature जो कियों है dangerously set inner HTML
0:04
किसी भी एक container के अंदर आपको HTML डालनी है तो आपको use करना पड़ता है dangerously set inner HTML
0:11
अगर आप लोग directly HTML को render करने की कोशिश करोगे तो वो जो tags होते हैं वो as it is आपकी page पे render हो जाएंग��
0:17
जो कि बिल्कुल भी अच्छा experience नहीं होगा user के लिए तो आज के इस video में हम लोग देखेंगे क��
0:21
dangerously set inner HTML के थरू किस तरह से hunting coder का जो blog ह��
0:26
जिसमें सिर्फ एक paragraph था सिर्फ plain text था किस तरह से उसमें हम लोग डाल सकते है��
0:31
HTML content ताकि वो अच्छा दिखे खुबसूरत दिखे और formatting के options हमारे पास बढ़ जा��
0:37
चलते हैं computer screen के अंदर और देखते हैं कि hunting coder के अंदर हम लोग HTML किस तरह से use करेंग��
0:43
आज मैं आप लोगों से बात करने जा रहा हू��
0:54
dangerously set inner HTML के बारे में अब यार क्योंकि हम बहुत आगे आजुके हैं इस course के अंदर
0:59
तो मैं आपको ये नहीं बताऊंगा कि आप लोग यहाँ पर YAN रन कर लो
1:03
और इसके बाद Dev लिख दो, और इसके बाद Control क्लिक करके अपना Server कोल दो
1:07
यह सब बाते मैं नहीं बता रहा हूँ, ठीक है? ह вопросы पर देखते हैं और अगर आप एक पराग्राफ लिखना चाहते हो तो आपको एक पराग्राफ लिखना चाहते हैं और मैं इस प्रतिश को यहां पर एक पर लिखना चाहता हूं ठीक है मैं मतलब कुछ इस तरह से लिखना चाहता हूं कि मैं फॉर मार्टिंग को रिटेड कर स��
1:39
दिल जाए कोई बढ़िया सा यहां पर क्या मैं इसको कॉपी पेस्ट कर सकता हूं वर्ड से यहां पर नहीं मैं इसकी बा��
1:45
नहीं कर रहा हूं हां यह वाला यह एडिटर मुझे चाहिए ठीक है अब देखो इसका जो आउटपुट है वह क्या है इसका आउटपु��
1:51
यह टीम है ठीक है अगर मैं से इसके में कॉपी करता हूं और यहां पर पेस्ट कर देता हूं यहां पर य��
1:58
पेस्ट कर रहा हूं कि मैं इससे न्यू लाइन हटाना चाहता हूं ठीक है और अब मैं इसको यहां पर शिफ्ट एंड कर दूंग��
2:05
यहां पर पेस्ट कर दोगा इसको ठीक है और कुछ इशूज आ रहे हैं कुछ इशूज आ रहे हैं पार्सिंग में वह क्या ��
2:12
रहे हैं जल्दी से कमांड पैलेट में जाकर वर्ड रैप और स्क्रीन कास्ट मोड दोनों आन कर लेते हैं ठीक है selector
2:35
follow करने पड़ते हैं ठीक है थोड़े बहुत नहीं हम कानून होते हैं तो यार मुझे एक tool मिल गया online जिसका नाम ह��
2:40
freeformatter.com इसमें मैंने एक tool मैंने search किया था escape json और मुझे पहला मिल गया है तो मैंने क्या किय��
2:45
कि यहाँ पर अपनी json string डाल दी इसने मुझे as a safe JSON output करके दे दी, ठीक है
2:50
सिंपल सी कहानी है, अब देखो मैं क्या करूँगा, इसको save करूँगा, और सारी की सारी ये file through tabs हैं, उन्हें बंद करूँगा
2:56
close tabs to the right, इस page को reload करूँगा, और यहाँ पर देखो क्या हुआ
3:00
दिक्कत क्या हुई, ये HTML parts नहीं हुई, ले आप कहेंगे एक टीम इन सेफ है ठीक है आप यह कहेंगे कि एक टीम को पार्स कर दिया जाए लेकिन पार्स कैस��
3:24
करें आपको बताना पड़ेगा नेक्स जस को कि आप पार्स करें एक टीम को तो इसके लिए एक यहां पर टूल होता ह��
3:32
एक सेटिंग होती है डेंजरसली सेट इनर एडिटीएमल और वह रियाप्ट मोती है नेक्स्ट इसका पार्ट नहीं है व��
3:39
नेक्स्ट इस इन फैक्ट वह रियाप्ट का फीचर है तो मैं डेंजरसली सेट इनर एडिटीएमल रियाप्ट लिखूंगा और यहा��
3:45
मैं क्या करूंगा कि कुछ इस तरह से आप लोग देखो मैं रिटर्न करूंगा अंडरस्कोर स्टीएमल और मैं कुछ इस तरह से करूंगा डिंजरसली से��
3:53
एक टीम लेजिए को टो क्रिएट मार्क अप ठीक है जिस तरह से मैंने काम किया है वही काम मैं यहां पर करूंग��
3:57
तो मैं आऊंगा अपने स्लग डॉट जएस में और यहां पर आप लोगों को दिखाता हूं कि जो ब्लॉक डॉट कॉन्टेंट ह��
4:04
मैं इसको कुछ इस तरह से डालूंगा डिव के अंदर मैं कहूंगा अब डेंजरसली सेट इन एडिश टीएमल इस इकॉल टो क्रिएट मार्क ठीक है कंट्रोल एक्स और मैं ऐसे करूंगा और मैं यहां पर लिखूंगा ब्लॉग एंड कुछ इस तरह स��
4:21
है और यह से ब्लॉक को टाइम को हटा दूंगा ठीक है क्या मैं सही हूं यहां पर मैंने कुछ इस तरह से किया है क्य��
4:30
मैं सही हूं यहां पर नहीं मैं सही नहीं हूं कि मुझे डेव को यहां लिखना पड़ेगा अब मैं सही हूं ठीक है अब मुझ��
4:36
एक मार्कप का जो मेथड यह बनाना पड़ेगा और यह मैं आप से कॉपी करूंगा और बनाऊंगा क्यों ठीक है कहां गया मेर��
4:42
सोर्स कोड मैं यहां पर बना लूंगा इसको अपने कंपोनेंट के अंदर यह बना लेता हूं ठीक है और यहां पर देखो mai
5:21
क्रिएट मार्कअप क्रिएट मार्कअप ओके तो यहां पर मुझे क्या करना पड़ेगा पास करना पड़ेगा क्रिएट मार्कअप क��
5:28
ब्लॉक डॉट कॉन्टेंट ठीक है और मैं यहां पर सीखना दूंगा इसको सीखना दूंगा सीफ और कॉन्टेंट ठीक ह��
5:37
रिलोड करो यह देखो यहां पर आ गया है मैं जरा डाख मोट हटाकर दिखाता हूं आप लोगों और देखो कि बिल्कु��
5:43
एक्स्टीएमल यहां पर रेंडर हो गई जिससे हमने लिखी थी ठीक है तो दो कितना बढ़ी एक्स्टीएमल रेंडर होक��
5:48
आपको मिली है यहां पर और इस तरह काम हम लोग कर सकते हैं तो चाहेंगे कि जो हमारा ब्लॉग है उसको व��
5:53
कुछ इस तरह से दिखाई पड़े ना कि बोरिंग से दिखाई पड़े कुछ इस तरह से तो हो कि आप समझ गए होंग��
5:58
कि हमारे ब्लॉग में किस तरह से हम लोग एचटीएमल को यूज करेंगे लेकिन अभी एक दिक्कत आ गई है और वह बताए��
6:03
क्या दिक्कत है यह देखो यहां पर देखिए आप क्या हो गया यह यह क्या है यह ऐसा टेक्स्ट हम लोग दिखाएंग��
6:09
नहीं हम ऐसा टेस्ट नहीं दिखाना चाहेंगे हम क्या करेंगे अपनी JSON के अंद��
6:13
हम एक और एक और entry डालेंगे और उसको हम रखेंगे नाम उसक��
6:17
Meta DESC और वो हम Google को भी सब्मिट करेंगे Meta DESC औ��
6:24
डबल कोट्स डबल कोट्स फ्लास इन फ्यू मिनिट्स आई वेल टीज यू फ्लास इन फ्यू मिनिट्स ठीक है और यह करने के बाद मैं रिलोड करूंगा और कुछ होगा नहीं ठीक है उसका रीजन पता है क्या है उसका रीजन है कि मैंने अभी कंफिगर ही नहीं किया है मैटर डीएसी यूज करना तो म��
6:57
सब्स्रिन में आ रहा था अब मैं क्या करूंगा मैं बनाऊंगा मैं टाइट डीएस की का सब्स्रिन क्योंकि मेरा ज��
7:04
अभी कांटेंट है वह मेरी क्या है वह मेरी एचटीएमल ठीक है और यहां पर क्या कह रहा है कैनोट रीड प्रॉपरी��
7:35
और यहाँ पर अपने लोट करूंगा तो यहाँ गया देखो यहाँ पर लान प्लास के फिर मिनट साइवल टीच फ्लास के फिर मिनट साप इसको चेंज कर लेना यार मुझे बता यह अच्छा नहीं लग रहा ह��
7:43
है लौटोन प्लास को लाइट यह दिखा और अब इसके बाद हो जावास्क्रिप्ट यह दिखा ठीक है एंड सो ऑन ठीक है एंड स��
7:50
ऑन तो यहां पर आप लोग जो है बड़ा आराम से ब्लॉगिंग कर सकते हो एच्टीएमल डाल कर यहां पर एंड एट द सेम टाइम अ��
7:57
आपकी यहां पर यह भी दिखेगी आपकी जो मेटा डिस्क्रिप्शन है वह भी यहां पर दिखेगा तो आपकी आप लोगो��
8:02
मजा आ रहा है आप लोग यह टीम एडिटर जो है यह वेबसाइट ठीक है ऑनलाइन एडिटर डॉट डेव यह भी अच्छा एडिट��
8:11
लिख रहा है मुझे तो यहां पर भी आप लोग कर सकते हैं एक हैडिंग मना सकते हो आज कल यह टूल्स बहुत सार��
8:17
अवेलेबल है फिर दिस इस मी और यह लिखने के बाद एडिटीश टीम सोच पूर्ट देखो तो आप यहां से इस टीम लिख सकत��
8:25
यहां से विजिविक में आगे यहां से इस टीम में आगे देख रहा है आप इतना सही जीज है और यह करने के बाद आप क्या कर��
8:31
यहां पर एंटर बार होगा जब तो यहां पर आप कुछ भी लिख सकते हो तो मान लो मैं यह कॉपी कर दूं यह कॉपी कर दूंग��
8:37
कोई इस तरह से तो यह पूरा आ गया आप अब मैं अगर इसकी एसटीएमल चाहूं तो मुझे बिल जाएगी ठीक है तो इ��
8:45
तरह की बहुत सारे टूल्स आज कल आ गया आप लोगों को यूज कर सकते हो अपने ब्लॉक को लिख सकते हैं कि हमारे ब्लॉ��
8:50
बाक एंड तो है नहीं हमने बहुत सी सिंपल सा ब्लॉक बनाया है और हमारी स्ट्रैटेजी भी यही थी हमने कहा कि यार हम स्टार्टिंग में ब्लॉक बनाएंगे पहले प्रॉफिटेबिलिटी देखेंगे हम हमारे ब्लॉक पर विजिटर्स आएं एक अच्छा ब्लॉक बने��
9:20
और आपको यहाँ पर समझ में आ गया किस तरह से अपने डेंजरस ली सेटिंग टेमिकल का इस्तेमाल करा अगर नेक्स्��
9:25
यह प्लेडिस्ट आप लोगों ने अभी तक एक्सेस नहीं कर दिया तो जरूर एक्सेस करें अभी के लिए इस वीडियो मे��
9:29
guys thank you so much guys for watching this video and i will see you next time
#Other
#Computer Education
