Como usar PortPreview com um aplicativo Next.js

Para usar o PortPreview com um aplicativo Next.js, execute next dev na porta 3000, inicie npx portpreview 3000 e use o URL HTTPS para redirecionamentos OAuth, manipuladores de rota de webhook, visualizações móveis e compartilhamento de UI em andamento, sem necessidade de implantação.

Por que encapsular um aplicativo Next.js

Next.js costuma ser a face pública de um produto: páginas de marketing, painéis e manipuladores de rotas de API em um único repositório. Terceiros ainda não conseguem acessar localhost. Um túnel fornece uma origem HTTPS pública estável enquanto você itera em next dev ou next dev --turbo.

• Webhooks. Stripe, Clerk e Reenvie POST para suas rotas app/api/.... Consulte Next.js webhook local testing para padrões de corpo bruto.
• OAuth. Registre https://your-tunnel.portpreview.dev/api/auth/callback/... no Auth0, Google ou GitHub durante o desenvolvimento. Consulte test OAuth callbacks locally.
• Visualizações de dispositivos móveis e das partes interessadas. Envie o link do túnel para controle de qualidade ou design. Consulte share a local dev server.

Início rápido

1. Do seu projeto Next.js: npm run dev (porta padrão 3000).
2. Em um segundo terminal: npx portpreview 3000.
3. Abra o URL https://....portpreview.dev impresso em um navegador ou telefone.
4. Aponte serviços externos na mesma origem mais o caminho da API.

A API App Router roteia atrás de um túnel

Os manipuladores de rotas recebem solicitações em proxy com os cabeçalhos originais intactos – útil para assinaturas de webhook. Mantenha as rotas do webhook no tempo de execução do Node quando os provedores precisarem de criptografia do Node:

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

Para verificação de assinatura, leia await request.text() antes de analisar JSON. O middleware que lê o corpo globalmente quebrará os webhooks; exclui /api/webhooks no correspondente middleware.ts.

Variáveis de ambiente e URLs públicos

Quando o código do cliente precisar saber sua origem pública (OAuth, URLs de ativos absolutos), armazene o túnel ativo em .env.local:

NEXT_PUBLIC_APP_URL=https://abc123.portpreview.dev

Reinicie next dev após alterar os arquivos env. Para segredos de webhook somente de servidor, use vars sem prefixo como STRIPE_WEBHOOK_SECRET.

WebSockets e servidores personalizados

Se você executar um servidor Node personalizado com socket.io junto com Next.js, o PortPreview encaminhará atualizações do WebSocket por padrão. O Turbopack não altera o comportamento do túnel — apenas o empacotador.

Lista de verificação de segurança

• Não envie .env.local nem encapsula URLs para o git.
• Proteja o administrador e visualize rotas com autenticação, mesmo em túneis.
• Alterne as sessões do túnel ao compartilhar amplamente.
• Revise localhost tunnel security.

Next.js documentation cobre manipuladores de rotas e carregamento de ambiente. Start PortPreview free para túneis HTTPS compatíveis com Next.js.