MassvaiMassvai
ट्यूटोरियल4 मिनट में पढ़ें

प्रॉम्प्ट से प्रोडक्शन तक: AI से बने Next.js ऐप को डिप्लॉय करें

प्रीव्यू लिंक वह जगह है जहां ज़्यादातर AI से बने ऐप दम तोड़ देते हैं। ऐप चलता है, आप दो दोस्तों को प्रीव्यू URL भेजते हैं, और तीन हफ़्ते बाद प्रोजेक्ट छूट चुका होता है — क्योंकि प्रीव्यू कभी प्रोडक्ट था ही नहीं। प्रोडक्शन है: आपका अपना URL, असली यूज़र, और ऐसा इन्फ्रास्ट्रक्चर जो इस बात पर निर्भर न हो कि आपने ब्राउज़र टैब खुला रखा है या नहीं।

अच्छी खबर: अगर आपके बिल्डर ने एक स्टैंडर्ड Next.js प्रोजेक्ट जनरेट किया है, तो प्रोडक्शन का रास्ता छोटा और बना-बनाया है। यह वॉकथ्रू Massvai के फ़्लो पर आधारित है, लेकिन इसका ढांचा हर उस बिल्डर पर लागू होता है जो आपको असली कोड देता है।

डिप्लॉय से पहले: 10 मिनट का ऑडिट

प्रीव्यू सही दिखते ही डिप्लॉय कर देने की जल्दबाज़ी से बचिए। पहले चार चीज़ें जांचिए:

1. हर वह रास्ता क्लिक कीजिए जो कोई अनजान व्यक्ति लेगा। वह हैप्पी पाथ नहीं जिसे आप तीस बार टेस्ट कर चुके हैं — अजीब वाले रास्ते। खाली फ़ॉर्म सबमिट कीजिए। किसी ऐसी चीज़ का डिटेल पेज खोलिए जो मौजूद ही नहीं। अगर ऐप में ऑथ है, तो लॉग आउट होकर कोई पेज आज़माइए। जो भी टूटे, एजेंट को बताइए; लॉन्च से पहले ठीक करने की कीमत एक इटरेशन है, लॉन्च के बाद ठीक करने की कीमत यूज़र हैं।

2. अपने सीक्रेट्स की सूची बनाइए। ऐप जिस-जिस बाहरी सर्विस से बात करता है, सब लिखिए — डेटाबेस, ऑथ प्रोवाइडर, पेमेंट प्रोसेसर, ईमेल। हर एक की कुंजियां (keys) होती हैं, और वे कुंजियां एनवायरनमेंट वेरिएबल में रहनी चाहिए, कोड में कभी नहीं। Massvai प्रोजेक्ट के env वेरिएबल स्पष्ट रूप से मैनेज करता है और डिप्लॉयमेंट में इंजेक्ट करता है; आप जो भी प्लेटफ़ॉर्म इस्तेमाल करें, पक्का कीजिए कि जनरेटेड कोड वैल्यू हार्डकोड करने की बजाय process.env से पढ़ता है।

3. टेस्ट डेटा को असली डेटा से अलग कीजिए। अगर आपने टेस्ट डेटाबेस या Stripe की टेस्ट कुंजियों पर बनाया है, तो प्रोडक्शन को अपनी अलग वैल्यू चाहिए। यह लॉन्च के दिन का सबसे आम बग है: ऐप उन टेस्ट क्रेडेंशियल्स पर बिलकुल सही चलता है जिन्हें असली यूज़र्स को सर्व नहीं करना चाहिए।

4. एक चेकपॉइंट बनाइए। जिस वर्ज़न को शिप करने जा रहे हैं, उसका स्नैपशॉट लीजिए। अगले हफ़्ते जब आप इटरेट करते रहेंगे, तो आपको तुलना करने — या रोलबैक करने — के लिए एक भरोसेमंद स्थिति चाहिए होगी।

स्टेप 1: कोड अपने GitHub में लाइए

भले ही आपका बिल्डर सीधे डिप्लॉय कर सकता हो, पहले रिपॉज़िटरी को अपने GitHub अकाउंट में सिंक कीजिए। यह तीन वजहों से ज़रूरी है: यह आपका बैकअप है, कोई डेवलपर जुड़ने पर यह हैंडऑफ़ का रास्ता है, और यही Vercel की git-आधारित डिप्लॉय पाइपलाइन से जुड़ता है — भविष्य का हर पुश अपने आप डिप्लॉय होता है।

Massvai में यह बिल्ट-इन फ़्लो है: अपना GitHub अकाउंट कनेक्ट कीजिए, रेपो का नाम चुनिए, पुश कीजिए। नतीजा जांचने के लिए रेपो खोलिए और देखिए कि आपको एक सामान्य Next.js प्रोजेक्ट दिखता है — app/ डायरेक्टरी, package.json, TypeScript फ़ाइलें। यही आपकी संपत्ति है।

स्टेप 2: Vercel पर डिप्लॉय कीजिए

Next.js होस्टिंग के लिए Vercel डिफ़ॉल्ट जवाब है — एक उबाऊ, व्यावहारिक वजह से: हर Next.js फ़ीचर (सर्वर कंपोनेंट, API रूट, इमेज ऑप्टिमाइज़ेशन) के लिए ज़ीरो-कॉन्फ़िगरेशन सपोर्ट, एक ग्लोबल CDN, और ऑटोमैटिक HTTPS। मुफ़्त Hobby टियर छोटे प्रोडक्शन ऐप आराम से चला लेता है।

Massvai का गाइडेड फ़्लो आपका Vercel अकाउंट कनेक्ट करता है, प्रोजेक्ट बनाता है, आपके एनवायरनमेंट वेरिएबल साथ ले जाता है, और बिल्ड ट्रिगर करता है। इसे मैन्युअली करना भी मुश्किल नहीं: Vercel डैशबोर्ड में GitHub रेपो इंपोर्ट कीजिए, env वेरिएबल पेस्ट कीजिए, और डिप्लॉय क्लिक कीजिए।

दोनों ही तरीकों में, पहला बिल्ड ही सच की घड़ी है। जो जनरेटेड प्रोजेक्ट प्रीव्यू में साफ़ बिल्ड होता है, वह Vercel पर भी लगभग हमेशा साफ़ बिल्ड होता है — लेकिन अगर फेल हो, तो लॉग पढ़िए: एरर आमतौर पर कोई छूटा हुआ एनवायरनमेंट वेरिएबल होता है, और लॉग उसका नाम बता देगा।

स्टेप 3: कस्टम डोमेन जोड़िए

your-app.vercel.app चल जाता है, लेकिन असली डोमेन बदल देती है कि लोग प्रोडक्ट को कैसे देखते हैं — और यही वह हिस्सा है जिस पर नॉन-डेवलपर सबसे ज़्यादा अटकते हैं, इसलिए पूरा तरीका यहां है:

  1. किसी भी रजिस्ट्रार से डोमेन खरीदिए (.com के लिए करीब $10–15/साल)।
  2. उसे अपने प्रोजेक्ट में जोड़िए (Massvai की डोमेन सेटिंग्स में या Vercel के डैशबोर्ड में)।
  3. प्लेटफ़ॉर्म आपको जोड़ने के लिए एक-दो DNS रिकॉर्ड दिखाएगा — आमतौर पर एक A रिकॉर्ड या CNAME। उन्हें अपने रजिस्ट्रार के DNS पैनल में पेस्ट कीजिए।
  4. प्रोपेगेशन का इंतज़ार कीजिए — कुछ मिनट से लेकर कुछ घंटे। रिकॉर्ड रिज़ॉल्व होते ही HTTPS सर्टिफ़िकेट अपने आप जारी हो जाते हैं।

बस इतना ही। किसी भी मोड़ पर सर्वर एडमिनिस्ट्रेशन शामिल नहीं है।

स्टेप 4: प्रोडक्शन का पहला हफ़्ता

लॉन्च एक शुरुआती रेखा है। पहले हफ़्ते के लिए तीन आदतें:

  • असली व्यवहार देखिए। एक हल्का एनालिटिक्स टूल जोड़िए और देखिए कि लोग असल में कहां जाते हैं — यह कभी वहां नहीं होता जहां आपने सोचा था। यही आपका इटरेशन रोडमैप बन जाता है।
  • छोटा-छोटा शिप करते रहिए। GitHub के Vercel से जुड़े होने पर, हर सिंक किया बदलाव अपने आप डिप्लॉय होता है। "यूज़र ने बताया" और "प्रोडक्शन में ठीक हो गया" के बीच का फ़ासला एक घंटे से कम हो सकता है, और यही रफ़्तार जमे-जमाए प्रतिद्वंद्वियों पर आपकी सबसे बड़ी बढ़त है।
  • बेझिझक रोलबैक कीजिए। खराब डिप्लॉय? Vercel हर पिछला डिप्लॉयमेंट एक क्लिक की दूरी पर रखता है, और आपके बिल्डर के चेकपॉइंट कोड के स्तर पर वही सुरक्षा-जाल देते हैं। गलती की कीमत कुछ मिनट है, इसलिए हाथ खोलकर खेलिए।

वह हिस्सा जो असल में मायने रखता है

इन स्टेप्स में से किसी के लिए अब इंजीनियरिंग स्किल की ज़रूरत नहीं — यही बदलाव AI ऐप बिल्डर लाए हैं। जो वे नहीं कर सकते, वह है आपकी चीज़ को लोगों के सामने रखना। आपके प्रीव्यू टैब में पड़ा ऐप तब तक बिलकुल बेकार है जब तक कोई और उसे इस्तेमाल न करे। इसे इसी हफ़्ते डिप्लॉय कीजिए।

आज ही AI से अपना ऐप बनाएं

अपना विचार बताएं और लाइव प्रीव्यू, कोड का पूरा स्वामित्व और वन-क्लिक डिप्लॉयमेंट के साथ प्रोडक्शन-रेडी Next.js ऐप पाएं।

मुफ्त में शुरू करें

आगे पढ़ें

प्रॉम्प्ट से प्रोडक्शन तक: AI से बने Next.js ऐप को डिप्लॉय करें | Massvai Blog