Как использовать 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.

Предварительный просмотр на мобильных устройствах и для заинтересованных сторон. Отправьте ссылку на туннель в отдел контроля качества или дизайна. См. share a local dev server.

Быстрый старт

<ол>

Из вашего проекта Next.js: npm run dev (порт по умолчанию 3000).

Во втором терминале: npx portpreview 3000.

Откройте распечатанный URL-адрес https://....portpreview.dev в браузере или на телефоне.

Укажите внешним службам тот же источник и путь к API.

Маршруты API App Router через туннель

Обработчики маршрутов получают прокси-запросы с неповрежденными исходными заголовками, что полезно для подписей веб-перехватчиков. Сохраняйте маршруты веб-перехватчиков в среде выполнения 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.

Вебсокеты и пользовательские серверы

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

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

<ул>

Не фиксируйте .env.local и не туннелируйте URL-адреса в git.

Защитите маршруты администратора и просмотрите маршруты с помощью аутентификации даже в туннелях.

Ротация туннельных сеансов при широком доступе.

Отзыв localhost tunnel security.

Next.js documentation охватывает обработчики маршрутов и загрузку окружения. Start PortPreview free для HTTPS-туннелей, совместимых с Next.js.