วิธีใช้ PortPreview กับแอป Next.js

หากต้องการใช้ PortPreview กับแอป Next.js ให้เรียกใช้ next dev บนพอร์ต 3000 เริ่มต้น npx portpreview 3000 และใช้ HTTPS URL สำหรับการเปลี่ยนเส้นทาง OAuth ตัวจัดการเส้นทาง webhook การแสดงตัวอย่างอุปกรณ์เคลื่อนที่ และการแชร์ UI ที่อยู่ระหว่างดำเนินการ โดยไม่จำเป็นต้องปรับใช้

เหตุใดจึงต้องใช้แอป Next.js

Next.js มักจะเป็นที่เปิดเผยต่อสาธารณะของผลิตภัณฑ์: หน้าการตลาด แดชบอร์ด และตัวจัดการเส้นทาง API ในที่เก็บเดียว บุคคลที่สามยังไม่สามารถเข้าถึง localhost ได้ อุโมงค์ข้อมูลช่วยให้คุณมีต้นทาง HTTPS สาธารณะที่เสถียรในขณะที่คุณวนซ้ำใน next dev หรือ next dev --turbo

• Webhooks แถบ พนักงาน และส่ง POST อีกครั้งไปยังเส้นทาง app/api/... ของคุณ ดู Next.js webhook local testing สำหรับรูปแบบ Raw-Body
• OAuth ลงทะเบียน https://your-tunnel.portpreview.dev/api/auth/callback/... ใน Auth0, Google หรือ GitHub ในระหว่างการพัฒนา ดู test OAuth callbacks locally.
• ตัวอย่างอุปกรณ์เคลื่อนที่และผู้มีส่วนได้ส่วนเสีย ส่งลิงก์อุโมงค์ไปยัง QA หรือการออกแบบ ดู share a local dev server.

เริ่มต้นอย่างรวดเร็ว

1. จากโปรเจ็กต์ Next.js ของคุณ: npm run dev (พอร์ตเริ่มต้น 3000)
2. ในเทอร์มินัลที่สอง: npx portpreview 3000.
3. เปิด URL https://....portpreview.dev ที่พิมพ์ออกมาในเบราว์เซอร์หรือโทรศัพท์
4. ชี้บริการภายนอกที่ต้นทางเดียวกันพร้อมเส้นทาง API ของคุณ

เส้นทาง App Router API หลังอุโมงค์

ตัวจัดการเส้นทางได้รับคำขอพร็อกซีโดยมีส่วนหัวดั้งเดิมครบถ้วน — มีประโยชน์สำหรับลายเซ็นเว็บฮุค เก็บเส้นทางของเว็บฮุคไว้บนรันไทม์ของโหนดเมื่อผู้ให้บริการต้องการการเข้ารหัสของโหนด:

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

สำหรับการตรวจสอบลายเซ็น โปรดอ่าน await request.text() ก่อนแยกวิเคราะห์ JSON มิดเดิลแวร์ที่อ่านเนื้อหาทั่วโลกจะทำลาย webhooks ไม่รวม /api/webhooks ใน middleware.ts ตัวจับคู่

ตัวแปรสภาพแวดล้อมและ URL สาธารณะ

เมื่อโค้ดไคลเอ็นต์ต้องทราบที่มาสาธารณะ (OAuth, URL ของเนื้อหาที่สมบูรณ์) ให้จัดเก็บอุโมงค์ที่ใช้งานอยู่ใน .env.local:

NEXT_PUBLIC_APP_URL=https://abc123.portpreview.dev

รีสตาร์ท next dev หลังจากเปลี่ยนไฟล์ env สำหรับความลับของเว็บฮุคสำหรับเซิร์ฟเวอร์เท่านั้น ให้ใช้ vars ที่ไม่มีคำนำหน้า เช่น STRIPE_WEBHOOK_SECRET

WebSockets และเซิร์ฟเวอร์แบบกำหนดเอง

หากคุณเรียกใช้เซิร์ฟเวอร์โหนดแบบกำหนดเองด้วย socket.io ควบคู่ไปกับ Next.js PortPreview จะส่งต่อการอัปเกรด WebSocket ตามค่าเริ่มต้น Turbopack จะไม่เปลี่ยนพฤติกรรมของทันเนล — มีเพียง Bundler เท่านั้น

รายการตรวจสอบความปลอดภัย

• อย่าส่ง .env.local หรือช่องสัญญาณ URL ไปยังคอมไพล์
• ปกป้องผู้ดูแลระบบและดูตัวอย่างเส้นทางด้วยการตรวจสอบสิทธิ์แม้ในอุโมงค์
• หมุนเวียนเซสชันทันเนลเมื่อแชร์ในวงกว้าง
• รีวิว localhost tunnel security.

Next.js documentation ครอบคลุมถึงตัวจัดการเส้นทางและการโหลด env Start PortPreview free สำหรับอุโมงค์ HTTPS ที่เป็นมิตรกับ Next.js