I'm trying to build a next.js 13 app that streams google drive videos, but to be honest I don't know much about streaming, so I would like to ask for your guys help.

this is my Video component:

export default async function Video({ params }: VideoParamsProps) {
  const { videoId } = params
  return (
    <main className="max-w-[1280px] mx-auto px-3 mt-24">
      <div className="flex flex-col gap-2">
        <h1 className="text-2xl lg:text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-br from-[#53D72E] to-primary">
          Dashboard
        </h1>

        <h2 className="text-3xl lg:text-4xl font-bold">{video.name}</h2>
      </div>

      <div className="mt-16">
        <video width={650}>
          <source src={`/api/videos/${videoId}`} type="video/mp4" />
        </video>
      </div>
    </main>
  )
}

and this is my route handler:

import { UseDrive } from '@/src/hooks/UseDrive'
import { getServerSession } from 'next-auth'
import { NextResponse } from 'next/server'

interface VideoProps {
  params: {
    videoId: string
  }
}

export async function GET(request: Request, { params }: VideoProps) {
  const session = await getServerSession()

  console.log(params)

  if (!session) {
    return new NextResponse('Unauthorized', { status: 401 })
  }

  const range = request.headers.get('range')

  if (!range) {
    return new NextResponse('Range header is required', { status: 400 })
  }

  const { videoId } = params

  const drive = UseDrive()

  try {
    const video = await drive.files.get(
      {
        fileId: videoId,
        alt: 'media',
      },
      {
        responseType: 'stream',
      },
    )

    console.log(video)
  } catch (error) {
    console.log(error)
    return new NextResponse('Video not found', { status: 404 })
  }
}

now what do I have to do to be able to stream the video to the client? this is what video.data looks like