Next.js के साथ 2026 में क्विज़ ऐप बनाने के लिए, प्रश्नों को डेटा के रूप में मॉडल करें, उन्हें एक छोटे क्लाइंट कंपोनेंट में रेंडर करें जो React state में जवाब और स्कोर ट्रैक करता है, सबमिट पर नतीजा गणना करें, और यदि आप लीड कैप्चर करना चाहते हैं तो Supabase जैसे डेटाबेस में प्रतिक्रियाएँ सहेजें। पेज को खुद एक सर्वर कंपोनेंट रखें और केवल इंटरैक्टिव हिस्से को क्लाइंट पर भेजें। यही पूरी आर्किटेक्चर है, और यह फॉर्म SaaS से ज़्यादा तेज़ और सस्ता है।Supabase if you want to capture leads. Keep the page itself a server component and push only the interactive part to the client. That is the whole architecture, and it is faster and cheaper than a form SaaS.
मुख्य बात: पेज को सर्वर कंपोनेंट रखें, इंटरैक्टिविटी को एक छोटे क्लाइंट आइलैंड में भेजें, प्रश्नों को डेटा के रूप में स्टोर करें, स्कोर को state में ट्रैक करें, और नतीजों और ईमेल को Supabase में सहेजें। आपको कोई प्रति-प्रतिक्रिया शुल्क नहीं के साथ एक तेज़, एम्बेडेबल, लीड-कैप्चरिंग क्विज़ मिलता है।Keep the page a server component, push interactivity to a small client island, store questions as data, track score in state, and persist results and emails to Supabase. You get a fast, embeddable, lead-capturing quiz with no per-response fees.
Typeform और Jotform जैसे टूल्स बेहतरीन हैं जब तक आप पूर्ण ब्रांडिंग, कोई प्रति-प्रतिक्रिया सीमा नहीं, और डेटा और लीड्स को अपने पास रखना नहीं चाहते। एक क्विज़ के लिए जो आपकी मार्केटिंग का केंद्र है, इसे खुद बनाना आमतौर पर बेहतर फैसला है। यहाँ मैं इसे कैसे बनाता हूँ।
क्यों इसे खुद बनाएँ
तीन कारण: नियंत्रण, लागत, और डेटा। आपको एक क्विज़ मिलता है जो बिल्कुल आपके ब्रैंड जैसा दिखता है, आप मासिक प्रतिक्रिया कैप और प्रति-सीट शुल्क से बचते हैं, और हर जवाब और ईमेल आपके अपने डेटाबेस में आता है जहाँ आप लीड्स को स्कोर कर सकते हैं और फॉलो-अप ट्रिगर कर सकते हैं। ट्रेड-ऑफ एक या दो दिन की बिल्ड टाइम बनाम SaaS में फील्ड को ड्रैग करना है।
प्रश्नों को डेटा के रूप में मॉडल करें
क्विज़ को एक सादे डेटा संरचना के रूप में परिभाषित करें: प्रश्नों की एक सरणी, जिसमें प्रत्येक के विकल्प और एक स्कोर या परिणाम भार हो। प्रश्नों को डेटा के रूप में रखना, मार्कअप के रूप में नहीं, का मतलब है कि आप रेंडरिंग कोड को छुए बिना उन्हें जोड़, पुनः क्रम दे या A/B परीक्षण कर सकते हैं, और बाद में आप उन्हें CMS या डेटाबेस में स्थानांतरित कर सकते हैं यदि गैर-विकासकर्ताओं को उन्हें संपादित करने की आवश्यकता है।
आर्किटेक्चर: सर्वर शेल, क्लाइंट आइलैंड
App Router में, रूट को एक सर्वर घटक के रूप में रखें जो पृष्ठ शेल, SEO टैग और पहली पेंट को रेंडर करता है। इंटरैक्टिव क्विज़ को एक एकल क्लाइंट घटक (एक use-client आइलैंड) में रखें जो वर्तमान प्रश्न, चलते समय स्कोर और React state में उत्तर रखता है। यह JavaScript बंडल को छोटा और पृष्ठ को तेज़ रखता है, जो महत्वपूर्ण है क्योंकि क्विज़ अक्सर साझा किए जाते हैं और कोल्ड ट्रैफिक पर आते हैं।App Router, keep the route a server component that renders the page shell, SEO tags, and the first paint. Put the interactive quiz in a single client component (a use-client island) that holds the current question, the running score, and the answers in React state. This keeps the JavaScript bundle small and the page fast, which matters because quizzes are often shared and land cold traffic.
परिणाम और लीड को कैप्चर करना
सबमिट पर, स्कोर से परिणाम की गणना करें, परिणाम दिखाएं, और प्रतिक्रिया को डेटाबेस में लिखें। Supabase के साथ आप उत्तरों को डालते हैं और, यदि आप परिणाम को ईमेल के पीछे गेट करते हैं, तो लीड को, एक सर्वर एक्शन या रूट हैंडलर से एक कॉल में डालते हैं। अब क्विज़ केवल एनगेजमेंट नहीं है; यह एक लीड-कैप्चर मशीन है जिसका आप मालिक हैं, कोई निर्यात सीमा नहीं।server action or route handler. Now the quiz is not just engagement; it is a lead-capture machine you own, with no export limits.
इसे साझा करने योग्य बनाना
प्रत्येक परिणाम को एक स्थिर URL और एक गतिशील Open Graph इमेज दें ताकि साझा किए गए लिंक परिणाम का पूर्वावलोकन करें। एक क्विज़ जो एक साझा करने योग्य परिणाम पृष्ठ पैदा करता है वह अपना खुद का वितरण चैनल है, जो मार्केटिंग क्विज़ का पूरा बिंदु है और कुछ फॉर्म उपकरण यह खराब करते हैं।dynamic Open Graph image so shared links preview the outcome. A quiz that produces a shareable result page is its own distribution channel, which is the entire point of marketing quizzes and something most form tools do poorly.
तैनात करें और प्रदर्शन
शेल को स्थैतिक रूप से रेंडर करें, छोटे क्लाइंट आइलैंड को एज पर या क्लाइंट पर चलाएं, और क्विज़ कहीं भी तेज़ी से लोड होता है। क्योंकि भारी काम डेटा और थोड़े से state के अलावा कुछ नहीं है, स्केल करने के लिए कोई सर्वर नहीं है और कोई प्रति-प्रतिक्रिया बिल नहीं है, बस आपकी सामान्य होस्टिंग।
किसी SaaS के बजाय कब इस्तेमाल करें
अगर आपको आज दोपहर तक क्विज लाइव करना है, या गैर-तकनीकी स्टाफ को नियमित रूप से क्विज बनाने और संपादित करने हैं, तो Tally या Jotform जैसा टूल व्यावहारिक विकल्प है। Next.js में इसे तब बनाएँ जब क्विज एक मूल, ब्रांडेड, उच्च-ट्रैफिक एसेट हो और डेटा और अनुभव पर मालिकाना हक रखना इंजीनियरिंग के लायक हो।
FAQ
क्या मुझे Next.js में क्विज बनाने के लिए बैकएंड की जरूरत है?
क्विज लॉजिक के लिए नहीं, जो क्लाइंट में चलता है। आपको बैकएंड की जरूरत केवल प्रतिक्रियाएँ स्टोर करने या लीड कैप्चर करने के लिए है, और Supabase जैसा होस्टेड डेटाबेस अपना सर्वर चलाए बिना इसे कवर करता है।
क्विज प्रतिक्रियाएँ कैसे स्टोर करूँ?
सबमिट करते समय उन्हें डेटाबेस में लिखें, Next.js सर्वर एक्शन या रूट हैंडलर के माध्यम से। Supabase या कोई भी Postgres काम करता है; उत्तर और गणना किया गया परिणाम, साथ ही ईमेल अगर आप एक संग्रह करते हैं, तो इंसर्ट करें।
क्विज से लीड कैप्चर कैसे करूँ?
परिणाम को ईमेल फील्ड के पीछे गेट करें, फिर ईमेल को प्रतिक्रिया के साथ स्टोर करें। क्योंकि आप डेटाबेस के मालिक हैं, हर लीड आपकी है स्कोर करने और फॉलो अप करने के लिए, कोई निर्यात सीमा नहीं जो फॉर्म SaaS लागू कर सकता है।
क्विज के लिए Next.js या Typeform?
स्पीड और नॉन-टेक्निकल एडिटिंग के लिए Typeform; Next.js का इस्तेमाल करें जब आप पूरी ब्रांडिंग चाहते हैं, कोई प्रति-रेस्पांस फीस नहीं, शेयरेबल रिजल्ट पेजेस, और डेटा पर आपका खुद का नियंत्रण। एक कोर मार्केटिंग क्विज के लिए, आमतौर पर Next.js बिल्ड ही जीत जाता है। अगर आप इसे बनवाना चाहते हैं, तो यह बिलकुल वही तरह की चीज है जो मैं बनाता हूँ।exactly the kind of thing I build.
संबंधित: नो-कोड रूट के लिए Typeform विकल्प, और रेस्पांस स्टोर करने के लिए serverless डेटाबेसेस डायरेक्टरी।Typeform alternatives for the no-code route, and the serverless databases directory for where to store responses.