Làm cách nào để hiển thị máy chủ phát triển Next.js bằng PortPreview?

Khởi động ứng dụng Next.js của bạn trên localhost (thường là cổng 3000), sau đó chạy npx portpreview 3000 trong một thiết bị đầu cuối khác. Sử dụng URL HTTPS cho webhook, chuyển hướng OAuth và chia sẻ.

Tôi có thể kiểm tra lệnh gọi lại OAuth trên localhost bằng Next.js không?

Các nhà cung cấp bên ngoài yêu cầu URI chuyển hướng HTTPS công khai. Đăng ký URL đường hầm PortPreview của bạn làm lệnh gọi lại trong quá trình phát triển thay vì http://localhost.

Lỗi đường hầm Next.js phổ biến nhất là gì?

Đọc nội dung yêu cầu trong phần mềm trung gian gốc hoặc gọi request.json() trước khi xác minh chữ ký phá vỡ các tuyến webhook. Loại trừ các đường dẫn webhook và sử dụng chờ đợi request.text() cho nội dung thô.

Có an toàn khi chia sẻ URL đường hầm Next.js không?

Hãy coi các URL đường hầm như thông tin xác thực tạm thời. Chỉ chia sẻ với những cộng tác viên đáng tin cậy, tắt khi hoàn tất và không bao giờ tiết lộ các tuyến quản trị mà không xác thực. Xem các phương pháp hay nhất về bảo mật đường hầm localhost.

Cách sử dụng PortPreview với ứng dụng Next.js

Để sử dụng PortPreview với ứng dụng Next.js, hãy chạy next dev trên cổng 3000, khởi động npx portpreview 3000 và sử dụng URL HTTPS cho chuyển hướng OAuth, trình xử lý tuyến webhook, xem trước trên thiết bị di động và chia sẻ giao diện người dùng đang thực hiện — không cần triển khai.

Tại sao lại tạo đường hầm cho ứng dụng Next.js

Next.js thường là bộ mặt công khai của sản phẩm: trang tiếp thị, trang tổng quan và trình xử lý lộ trình API trong một kho lưu trữ. Các bên thứ ba vẫn không thể tiếp cận localhost. Một đường hầm cung cấp cho bạn nguồn gốc HTTPS công khai ổn định trong khi bạn lặp lại trong next dev hoặc next dev --turbo.

Webhooks. Sọc, Thư ký và Gửi lại POST tới các tuyến app/api/... của bạn. Xem Next.js webhook local testing để biết các mẫu cơ thể thô.
OAuth. Đăng ký https://your-tunnel.portpreview.dev/api/auth/callback/... trong Auth0, Google hoặc GitHub trong quá trình phát triển. Xem test OAuth callbacks locally.
Bản xem trước trên thiết bị di động và bên liên quan. Gửi liên kết đường hầm tới QA hoặc thiết kế. Xem share a local dev server.

Bắt đầu nhanh

Từ dự án Next.js của bạn: npm run dev (cổng mặc định 3000).
Trong thiết bị đầu cuối thứ hai: npx portpreview 3000.
Mở URL https://....portpreview.dev đã in trong trình duyệt hoặc điện thoại.
Trỏ các dịch vụ bên ngoài vào cùng một nguồn cộng với đường dẫn API của bạn.

Các tuyến API của Bộ định tuyến ứng dụng phía sau đường hầm

Trình xử lý tuyến nhận các yêu cầu ủy quyền với tiêu đề gốc còn nguyên — hữu ích cho chữ ký webhook. Giữ các tuyến webhook trong thời gian chạy Node khi nhà cung cấp cần Node crypto:

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

Để xác minh chữ ký, hãy đọc await request.text() trước khi phân tích cú pháp JSON. Phần mềm trung gian đọc nội dung trên toàn cầu sẽ phá vỡ webhook; loại trừ /api/webhooks trong đối sánh middleware.ts.

Biến môi trường và URL công khai

Khi mã khách hàng phải biết nguồn gốc công khai của nó (OAuth, URL nội dung tuyệt đối), hãy lưu trữ đường hầm đang hoạt động trong .env.local:

NEXT_PUBLIC_APP_URL=https://abc123.portpreview.dev

Khởi động lại next dev sau khi thay đổi tệp env. Đối với bí mật webhook chỉ dành cho máy chủ, hãy sử dụng các biến không có tiền tố như STRIPE_WEBHOOK_SECRET.

WebSockets và máy chủ tùy chỉnh

Nếu bạn chạy máy chủ Nút tùy chỉnh có socket.io cùng với Next.js, thì PortPreview sẽ chuyển tiếp các bản nâng cấp WebSocket theo mặc định. Turbopack không thay đổi hành vi của đường hầm — chỉ thay đổi trình đóng gói.

Danh sách kiểm tra bảo mật

Không cam kết .env.local hoặc URL đường hầm với git.
Bảo vệ quản trị viên và xem trước các tuyến đường bằng xác thực ngay cả trên đường hầm.
Xoay phiên phiên đường hầm khi chia sẻ rộng rãi.
Đánh giá localhost tunnel security.

Next.js documentation bao gồm các trình xử lý tuyến đường và tải env. Start PortPreview free dành cho các đường hầm HTTPS thân thiện với Next.js.