- HLS video upload in Next.js 15 can be built in roughly 120 lines of code across just four files.
- Direct HLS video upload bypasses your server entirely, solving the 1 MB Server Actions body cap problem.
- Webhook signature verification with timing-safe comparison prevents a subtle but critical security vulnerability.
- The same architecture works with Mux, Cloudflare Stream, or api.video — only endpoint names change.
- HLS video upload in Next.js 15 can be built in roughly 120 lines of code across just four files.
- Direct HLS video upload bypasses your server entirely, solving the 1 MB Server Actions body cap problem.
- Webhook signature verification with timing-safe comparison prevents a subtle but critical security vulnerability.
- The same architecture works with Mux, Cloudflare Stream, or api.video — only endpoint names change.
Why HLS Video Upload Is Harder Than It Looks in Next.js 15
Building an HLS video upload and playback feature sounds straightforward until you actually try it inside a modern Next.js 15 app. The moment a user tries to upload a 400 MB video, you run headfirst into a wall: Next.js 15 Server Actions cap request bodies at 1 MB by default. Even if you bump that limit on a Route Handler, you’re left with a serverless function sitting there holding hundreds of megabytes of raw video while encoding hasn’t even started. That’s not a great use of compute time or money.
The cleaner answer — and the one professional video platforms have been pushing for years — is direct upload. The browser sends bytes straight to the storage and encoding layer, your server never touches the file, and you’re freed up to handle the lightweight coordination work: issuing upload URLs, receiving webhook callbacks, and serving playback manifests. It’s a pattern that Source: https://dev.to/masonwritescode/build-a-video-upload-hls-playback-flow-in-nextjs-15-with-direct-uploads-2383
