Як використовувати PortPreview із програмою Next.js

Щоб використовувати PortPreview із програмою Next.js, запустіть next dev на порту 3000, запустіть npx portpreview 3000 та використовуйте URL-адресу HTTPS для переспрямувань OAuth, обробників маршрутів вебхуків, попереднього перегляду мобільних пристроїв і спільного використання поточного інтерфейсу користувача — розгортання не потрібне.

Навіщо тунелювати додаток Next.js

Next.js часто є загальнодоступним обличчям продукту: маркетингові сторінки, інформаційні панелі та обробники маршрутів API в одному сховищі. Треті сторони все ще не можуть отримати доступ до localhost. Тунель дає вам стабільне загальнодоступне джерело HTTPS під час ітерації в next dev або next dev --turbo.

• Веб-хуки. Stripe, Clerk і Resend POST на ваші маршрути app/api/.... Див. Next.js webhook local testing для шаблонів необробленого тіла.
• OAuth. Зареєструйте https://your-tunnel.portpreview.dev/api/auth/callback/... в Auth0, Google або GitHub під час розробки. Див. test OAuth callbacks locally.
• Попередній перегляд для мобільних пристроїв і зацікавлених сторін. Надішліть посилання на тунель до QA або Design. Див. 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 маршрутизує за тунелем

Обробники маршрутів отримують проксі-запити з незмінними оригінальними заголовками — це корисно для підписів вебхуку. Зберігайте маршрути вебхуків у середовищі виконання Node, коли постачальникам потрібне шифрування Node:

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

Щоб перевірити підпис, прочитайте await request.text() перед розбором JSON. Проміжне програмне забезпечення, яке зчитує тіло глобально, зламатиме веб-хуки; виключити /api/webhooks зі збігу middleware.ts.

Змінні середовища та публічні URL-адреси

Якщо код клієнта має знати своє загальнодоступне джерело (OAuth, абсолютні URL-адреси ресурсів), збережіть активний тунель у .env.local:

NEXT_PUBLIC_APP_URL=https://abc123.portpreview.dev

Перезапустіть next dev після зміни файлів env. Для секретів вебхука лише для сервера використовуйте змінні без префіксу, наприклад STRIPE_WEBHOOK_SECRET.

WebSockets і спеціальні сервери

Якщо ви запускаєте спеціальний сервер Node із socket.io разом із Next.js, PortPreview пересилає оновлення WebSocket за умовчанням. Turbopack не змінює поведінку тунелю — лише комплектувач.

Контрольний список безпеки

• Не передавайте .env.local або тунелюйте URL-адреси git.
• Захист адміністратора та попередній перегляд маршрутів за допомогою авторизації навіть у тунелях.
• Чергуйте сеанси тунелю під час широкого обміну.
• Огляд localhost tunnel security.

Next.js documentation охоплює обробники маршрутів і завантаження env. Start PortPreview free для HTTPS-тунелів, які підтримують Next.js.