How to Add Video Uploads to Your Next.js App (Supabase or Firebase)

create table videos (
  id uuid primary key default gen_random_uuid(),
  user_id uuid references auth.users(id),
  storage_path text NOT null,
  public_url text NOT null,
  mime_type text,
  size_bytes bigint,
  created_at timestamptz default now()
);

import { doc, setDoc } from "firebase/firestore";

await setDoc(doc(db, "videos", crypto.randomUUID()), {
  userId,
  storagePath: path,
  publicUrl: url,
  mimeType: file.type,
  sizeBytes: file.size,
  createdAt: Date.now(),
});

"use client";
import { useState } from "react";

export default function UploadPage() {
  const [file, setFile] = useState<File | null>(null);

  async function handleUpload() {
    if (!file) return;

    const formData = new FormData();
    formData.append("file", file);

    await fetch("/api/upload", { method: "POST", body: formData });
  }

  return (
    <div>
      <input type="file" accept="video/*" onChange={e => setFile(e.target.files?.[0] ?? null)} />
      <button onClick={handleUpload}>Upload</button>
    </div>
  );
}

import { NextRequest, NextResponse } from "next/server";
import { createClient } from "@supabase/supabase-js";

export async function POST(req: NextRequest) {
  const supabase = createClient(
    process.env.SUPABASE_URL, 
    process.env.SUPABASE_KEY
  );

  const data = await req.formData();
  const file = data.get("file") as File;

  const extension = file.name.split(".").pop();
  const videoId = crypto.randomUUID();
  const path = `videos/${videoId}.${extension}`;

  const { error } = await supabase.storage
    .from("videos")
    .upload(path, file, { contentType: file.type });

  if (error) return NextResponse.json({ error: error.message }, { status: 400 });

  const url = `${process.env.SUPABASE_URL}/storage/v1/object/public/${path}`;

  const { error: dbError } = await supabase.from("videos").insert({
    id: videoId,
    user_id: "some-user-id",
    storage_path: path,
    public_url: url,
    mime_type: file.type,
    size_bytes: file.size,
  });

  if (dbError) {
    return NextResponse.json({ error: dbError.message }, { status: 500 });
  }

  return NextResponse.json({ url, path });
}

export async function POST() {
  const supabase = createClient(
    process.env.SUPABASE_URL, 
    process.env.SUPABASE_KEY
  );

  const videoId = crypto.randomUUID();
  const path = `videos/${videoId}.mp4`;
  const { data, error } = await supabase.storage.from("videos").createSignedUploadUrl(path);

  if (error) return NextResponse.json({ error: error.message }, { status: 400 });

  return NextResponse.json({ uploadUrl: data.signedUrl, path, videoId });
}

await fetch(uploadUrl, { method: "PUT", body: file });

await supabase.from("videos").insert({
  id: videoId,
  user_id,
  storage_path: path,
  public_url: `${process.env.SUPABASE_URL}/storage/v1/object/public/${path}`,
  mime_type: file.type,
  size_bytes: file.size,
});

import { getStorage, ref, uploadBytesResumable, getDownloadURL } from "firebase/storage";

const storage = getStorage();
const videoId = crypto.randomUUID()
const path = `videos/${videoId}`;
const storageRef = ref(storage, path);

const task = uploadBytesResumable(storageRef, file);

task.on("state_changed", null, console.error, async () => {
  const url = await getDownloadURL(task.snapshot.ref);

  await setDoc(doc(db, "videos", crypto.randomUUID()), {
    id: videoId,
    userId,
    storagePath: path,
    publicUrl: url,
    mimeType: file.type,
    sizeBytes: file.size,
    createdAt: Date.now(),
  });
});

import { HyperserveClient } from "@hyperserve/hyperserve-js";
import { NextRequest, NextResponse } from "next/server";

// API key is server-side only, never expose it in the browser
const hyperserve = new HyperserveClient({
  apiKey: process.env.HYPERSERVE_API_KEY,
});

export async function POST(req: NextRequest) {
  const { filename, fileSizeBytes, dbVideoId } = await req.json();

  const { id, uploadUrl, contentType } = await hyperserve.createVideo({
    filename,
    fileSizeBytes,
    // Choose the resolutions you need for your use case
    resolutions: ["720p", "1080p"],
    isPublic: true,
    // Attach your own data (e.g. your DB row id) to correlate later via webhooks
    customMetadata: { dbVideoId },
  });

  return NextResponse.json({ id, uploadUrl, contentType });
}

"use client";
import { putVideoToStorage } from "@hyperserve/hyperserve-js/browser";

async function uploadToHyperserve(file: File) {
  // Your own id for this video, reused in your DB row below
  const dbVideoId = crypto.randomUUID();

  // 1. Ask your backend for an upload target
  const { id, uploadUrl, contentType } = await fetch("/api/video/create", {
    method: "POST",
    body: JSON.stringify({
      filename: file.name,
      fileSizeBytes: file.size,
      dbVideoId,
    }),
  }).then((r) => r.json());

  // 2. Upload the bytes straight to Hyperserve storage
  await putVideoToStorage({ uploadUrl, contentType, file });

  // 3. Tell Hyperserve the upload is done so transcoding can start
  await fetch("/api/video/complete", {
    method: "POST",
    body: JSON.stringify({ videoId: id }),
  });

  return { dbVideoId, hyperserveId: id };
}

const { videoId } = await req.json();
await hyperserve.completeUpload(videoId);

await supabase.from("videos").insert({
  id: dbVideoId,
  user_id,
  hyperserve_id: hyperserveId, // no storage_path / public_url needed
  mime_type: file.type,
  size_bytes: file.size,
});

await setDoc(doc(db, "videos", dbVideoId), {
  userId,
  hyperserveId,
  mimeType: file.type,
  sizeBytes: file.size,
  createdAt: Date.now(),
});

<video
  src={url}
  controls
  playsInline
/>

<video
  src={url}
  controls
  autoplay
  muted
  loop
  playsInline
/>

if (file.size > 200 * 1024 * 1024) {
  alert("Max size is 200MB");
  return;
}

if (!file.type.startsWith("video/")) {
  alert("File must be a video");
  return;
}