नेक्स्ट.जेएस ऐप के साथ पोर्टप्रीव्यू का उपयोग कैसे करें

नेक्स्ट.जेएस ऐप के साथ पोर्टप्रीव्यू का उपयोग करने के लिए, पोर्ट 3000 पर next dev चलाएं, npx portpreview 3000 शुरू करें, और OAuth रीडायरेक्ट, वेबहुक रूट हैंडलर, मोबाइल पूर्वावलोकन और इन-प्रोग्रेस यूआई साझा करने के लिए HTTPS URL का उपयोग करें - कोई तैनाती की आवश्यकता नहीं है।

नेक्स्ट.जेएस ऐप को टनल क्यों करें

Next.js अक्सर किसी उत्पाद का सार्वजनिक चेहरा होता है: एक रेपो में मार्केटिंग पेज, डैशबोर्ड और एपीआई रूट हैंडलर। तीसरे पक्ष अभी भी localhost तक नहीं पहुंच सकते। जब आप next dev या next dev --turbo में पुनरावृति करते हैं तो एक सुरंग आपको एक स्थिर सार्वजनिक HTTPS मूल प्रदान करती है।

• वेबहुक। स्ट्राइप, क्लर्क, और अपने app/api/... रूट पर पोस्ट दोबारा भेजें। कच्चे शरीर के पैटर्न के लिए Next.js webhook local testing देखें।
• OAuth. विकास के दौरान Auth0, Google, या GitHub में https://your-tunnel.portpreview.dev/api/auth/callback/... पंजीकृत करें। test OAuth callbacks locally देखें.
• मोबाइल और हितधारक पूर्वावलोकन। QA या डिज़ाइन को टनल लिंक भेजें। share a local dev server देखें.

त्वरित शुरुआत

1. आपके Next.js प्रोजेक्ट से: npm run dev (डिफ़ॉल्ट पोर्ट 3000)।
2. दूसरे टर्मिनल में: npx portpreview 3000.
3. मुद्रित https://....portpreview.dev URL को ब्राउज़र या फ़ोन में खोलें।
4. बाहरी सेवाओं को एक ही मूल और अपने एपीआई पथ पर इंगित करें।

ऐप राउटर एपीआई एक सुरंग के पीछे मार्ग बनाता है

रूट हैंडलर को मूल हेडर के साथ प्रॉक्सी अनुरोध प्राप्त होते हैं - वेबहुक हस्ताक्षर के लिए उपयोगी। जब प्रदाताओं को नोड क्रिप्टो की आवश्यकता हो तो वेबहुक मार्गों को नोड रनटाइम पर रखें:

// app/api/health/route.ts
export async function GET() {
  return Response.json({ ok: true });
}

हस्ताक्षर सत्यापन के लिए, JSON को पार्स करने से पहले await request.text() पढ़ें। मिडलवेयर जो विश्व स्तर पर बॉडी को पढ़ता है वह वेबहुक तोड़ देगा; middleware.ts मिलानकर्ता में /api/webhooks को बाहर निकालें।

पर्यावरण चर और सार्वजनिक URL

जब क्लाइंट कोड को अपना सार्वजनिक मूल (OAuth, संपूर्ण संपत्ति URL) पता होना चाहिए, तो सक्रिय टनल को .env.local में संग्रहीत करें:

NEXT_PUBLIC_APP_URL=https://abc123.portpreview.dev

env फ़ाइलें बदलने के बाद next dev को पुनरारंभ करें। केवल-सर्वर वेबहुक रहस्यों के लिए, STRIPE_WEBHOOK_SECRET जैसे बिना उपसर्ग वाले वर्रों का उपयोग करें।

वेबसॉकेट और कस्टम सर्वर

यदि आप Next.js के साथ socket.io के साथ एक कस्टम नोड सर्वर चलाते हैं, तो PortPreview डिफ़ॉल्ट रूप से WebSocket अपग्रेड को अग्रेषित करता है। टर्बोपैक सुरंग व्यवहार को नहीं बदलता - केवल बंडलर।

सुरक्षा जांच सूची

• git के लिए .env.local या टनल URL न भेजें।
• सुरंगों पर भी प्रमाणीकरण के साथ व्यवस्थापक और पूर्वावलोकन मार्गों को सुरक्षित रखें।
• व्यापक रूप से साझा करते समय टनल सत्र घुमाएँ।
• समीक्षा localhost tunnel security.

Next.js documentation रूट हैंडलर और env लोडिंग को कवर करता है। Start PortPreview free Next.js-अनुकूल HTTPS सुरंगों के लिए।