Videos are one of the most engaging types of content you can deliver on the web, but they are also resource-heavy. If not hosted properly, they can slow down your site, cause buffering for users, and even increase your hosting costs. With Vercel, you have several efficient options to handle video files.

Use Vercel Blob for Video Storage

Vercel Blob is the recommended storage option for handling videos on Vercel. Unlike placing files directly in the project directory, Blob is designed to support large media files and integrates with the Vercel Edge Network for global delivery.

For smaller files, server-side uploads may be sufficient. However, when dealing with larger files (hundreds of MBs or more), server memory limits and request timeouts become a problem. In those cases, client-side uploads directly to Blob are more efficient.

The standard approach is to generate a signed upload URL from your server. This allows users to upload large video files straight to Blob storage without routing the file through your server, which prevents overload and scales effectively.

Uploading to Blob is straightforward. For example, you can create an API route to handle uploads:

code
// app/api/upload/route.ts
import { NextResponse } from "next/server";
import { put } from "@vercel/blob";

export async function POST(req: Request) {
  const form = await req.formData();
  const file = form.get("file") as File;
  if (!file) return;
code
  NextResponse.json({ error: "No file" }, { status: 400 });
  const blob = await put(file.name, file, { access: "public" });
  return NextResponse.json({ url: blob.url });
}

Once uploaded, you can render the video in your app with a simple <video> element:

code
<video src="https://your-blob-url" controls preload="metadata" />
Video CDN

Avoid Hosting Videos in the public/ Folder

It may seem convenient to drop video files into the public/ folder of your Next.js project, but this approach has serious downsides:

  • It increases your deployment size significantly.
  • Files don"t benefit from Vercel"s optimized caching.
  • Large media in public/ can lead to failed builds or poor playback performance.

Instead, always store videos in Vercel Blob or use a dedicated video CDN.

Use Efficient Formats & Compression (MP4, WebM, MOV, OGG)

Choosing the right video format and compressing your files before uploading is critical for performance.

  • MP4 (H.264/HEVC): widely supported and efficient.
  • WebM (VP9/AV1): offers better compression and smaller sizes, though not supported in every browser.
  • MOV (QuickTime): High-quality format commonly used in video editing workflows. While not ideal for web playback due to large sizes, MOV is useful as a source format before converting to MP4 or WebM.

Use a tool like FFmpeg to compress your videos before upload. Example command for MP4:

code
ffmpeg -i input.mov -c:v libx264 -preset medium -crf 22 -c:a aac -b:a 128k output.mp4

Leverage CDN Caching with Vercel"s Edge Network

Vercel Blob supports automatic CDN caching. Once a video is uploaded, it"s served from the nearest Vercel Edge location, reducing latency and buffering for viewers worldwide.

You don"t need to configure much"just serve the Blob URL. To manage versions, you can append a query string (e.g., ?v=2) so that updated videos don"t conflict with cached ones:

code
<video src="https://your-blob-url/video.mp4?v=2" controls preload="metadata" />

Add Subtitles via <track> for Accessibility

Accessibility should always be part of your video strategy. Adding captions or subtitles makes your videos usable for hearing-impaired users and improves comprehension for non-native speakers. Here"s an example of embedding subtitles with the <track> element:

code
<video controls preload="metadata">
<source src="https://your-blob-url/video.mp4" type="video/mp4" />
<track
src="https://your-blob-url/subtitles-en.vtt"
kind="subtitles"
srcLang="en"
label="English"
default
/>
</video>

Subtitles are usually stored in WebVTT (.vtt) format, which is lightweight and supported across modern browsers.