Jak korzystać z PortPreview z aplikacją Next.js

Aby używać PortPreview z aplikacją Next.js, uruchom next dev na porcie 3000, uruchom npx portpreview 3000 i użyj adresu URL HTTPS dla przekierowań OAuth, obsługi tras webhooka, podglądów mobilnych i interfejsu użytkownika w zakresie udostępniania w toku – wdrażanie nie jest wymagane.

Po co tunelować aplikację Next.js

Next.js jest często publiczną twarzą produktu: strony marketingowe, pulpity nawigacyjne i procedury obsługi tras API w jednym repozytorium. Osoby trzecie nadal nie mogą się połączyć z localhost. Tunel zapewnia stabilne publiczne źródło HTTPS podczas iteracji w next dev lub next dev --turbo.

• Webhooki. Stripe, Clerk i ponownie wyślij POST na swoje trasy app/api/.... Zobacz Next.js webhook local testing, aby zapoznać się z wzorami surowego ciała.
• OAuth. Zarejestruj https://your-tunnel.portpreview.dev/api/auth/callback/... w Auth0, Google lub GitHub podczas programowania. Zobacz test OAuth callbacks locally.
• Podglądy na urządzeniach mobilnych i dla zainteresowanych stron. Wyślij link do tunelu do kontroli jakości lub projektu. Zobacz share a local dev server.

Szybki start

1. Z projektu Next.js: npm run dev (domyślny port 3000).
2. W drugim terminalu: npx portpreview 3000.
3. Otwórz wydrukowany adres URL https://....portpreview.dev w przeglądarce lub telefonie.
4. Wskaż usługi zewnętrzne na to samo źródło i ścieżkę API.

Trasy API routera aplikacji za tunelem

Procedury obsługi tras otrzymują żądania proxy z nienaruszonymi oryginalnymi nagłówkami — przydatne w przypadku podpisów webhook. Zachowaj trasy webhooka w środowisku wykonawczym Node, gdy dostawcy potrzebują kryptowaluty Node:

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

W celu weryfikacji podpisu przeczytaj await request.text() przed analizą JSON. Oprogramowanie pośredniczące, które globalnie odczytuje treść, zepsuje webhooki; wyklucz /api/webhooks w dopasowaniu middleware.ts.

Zmienne środowiskowe i publiczne adresy URL

Gdy kod klienta musi znać swoje publiczne pochodzenie (OAuth, bezwzględne adresy URL zasobów), przechowuj aktywny tunel w .env.local:

NEXT_PUBLIC_APP_URL=https://abc123.portpreview.dev

Uruchom ponownie next dev po zmianie plików env. W przypadku sekretów webhooka tylko dla serwera użyj zmiennych bez prefiksu, takich jak STRIPE_WEBHOOK_SECRET.

WebSockety i serwery niestandardowe

Jeśli uruchamiasz niestandardowy serwer Node z socket.io razem z Next.js, PortPreview domyślnie przekazuje aktualizacje WebSocket. Turbopack nie zmienia zachowania tunelu — tylko pakiet.

Lista kontrolna bezpieczeństwa

• Nie przesyłaj .env.local ani nie tuneluj adresów URL do git.
• Chroń trasy administracyjne i podglądy za pomocą autoryzacji nawet w tunelach.
• Zmieniaj sesje tunelu podczas szerokiego udostępniania.
• Przejrzyj localhost tunnel security.

Next.js documentation obejmuje obsługę tras i ładowanie środowisk. Start PortPreview free dla tuneli HTTPS przyjaznych dla Next.js.