Error on fetch with stream in nextjs dev with --experimental-flag

[el-frontend]

Summary

Hi guys, I have a scenario where I need to create a route handler for file uploads and send the request using a stream. Something like this:

    const response = await fetch(url, {
      headers: {
        "Content-Type": "application/octet-stream",
        "X-File-Size": String(file.size),
      },
      method: "POST",
      body: file.stream(),
      // TS doesn’t know this yet; add it anyway:
      // @ts-expect-error duplex is required for streaming requests
      duplex: "half",
    });

The browser blocks the request with the following error: net::ERR_ALPN_NEGOTIATION_FAILED (see image).
I’m running my application with the --experimental-https flag to enable HTTPS so that streaming requests can work with fetch.

pnpm run dev --experimental-https

When I run:

curl -Iv --http2 https://localhost:300

I get this response:

* Host localhost:3000 was resolved.
* IPv6: ::1
* IPv4: 127.0.0.1
*   Trying [::1]:3000...
* Connected to localhost (::1) port 3000
* ALPN: curl offers h2,http/1.1
* (304) (OUT), TLS handshake, Client hello (1):
*  CAfile: /etc/ssl/cert.pem
*  CApath: none
* (304) (IN), TLS handshake, Server hello (2):
* (304) (IN), TLS handshake, Unknown (8):
* (304) (IN), TLS handshake, Certificate (11):
* (304) (IN), TLS handshake, CERT verify (15):
* (304) (IN), TLS handshake, Finished (20):
* (304) (OUT), TLS handshake, Finished (20):
* SSL connection using TLSv1.3 / AEAD-AES256-GCM-SHA384 / [blank] / UNDEF
* ALPN: server accepted http/1.1
* Server certificate:
*  subject: O=mkcert development certificate; [email protected]
*  start date: Oct 17 18:27:53 2025 GMT
*  expire date: Jan 17 19:27:53 2028 GMT
*  subjectAltName: host "localhost" matched cert's "localhost"
*  issuer: O=mkcert development CA; [email protected]; CN=mkcert [email protected]
*  SSL certificate verify ok.
* using HTTP/1.x
> HEAD / HTTP/1.1
> Host: localhost:3000
> User-Agent: curl/8.7.1
> Accept: */*
> 

It looks like the certificate is fine. Any idea what happened here? I’m using Chrome.

Additional information

No response

Example

No response

[ahuaiqom]

Hi @el-frontend 👋

Root cause: fetch(..., { body: file.stream(), duplex: 'half' }) in Chrome requires HTTPS + HTTP/2 (or HTTP/3).
Your curl output shows ALPN accepted http/1.1, so Next dev with --experimental-https is serving TLS over h1, and Chrome fails with ERR_ALPN_NEGOTIATION_FAILED.

Proof: curl -Iv --http2 https://localhost:3000 → ALPN: server accepted http/1.1 (no h2).

✅ **Fix options
Option A — put an HTTP/2 TLS proxy in front of Next dev (recommended)

Caddy (one file, auto h2):**

https://localhost:3443 {
tls internal
reverse_proxy localhost:3000
}

Run Caddy, start next dev on 3000, then hit https://localhost:3443.

NGINX (enable http2):

server {
listen 3443 ssl http2;
server_name localhost;

ssl_certificate /path/to/localhost.crt;
ssl_certificate_key /path/to/localhost.key;

location / {
proxy_set_header Host $host;
proxy_pass http://127.0.0.1:3000;
}
}

Browse to https://localhost:3443. Chrome will negotiate h2, and request streaming works.

Option B — use a runtime that serves h2 directly

Run your own small HTTPS http/2 terminator (Node/HTTP2) and proxy to Next, or use a tool that serves dev over h2. The current next dev --experimental-https doesn’t advertise h2.

FYI (server side)

Your Route Handler should read the stream (Web Streams API) and not buffer:

export async function POST(req: Request) {
const reader = req.body!.getReader();
let received = 0;
for (;;) {
const { value, done } = await reader.read();
if (done) break;
received += value.byteLength;
// write to storage/FS/etc.
}
return new Response(received=${received});
}

TL;DR: The cert is fine; the issue is no HTTP/2. Terminate TLS with h2 (Caddy/NGINX) in front of Next dev and your streaming upload will work.