; } Use in a Page (pages/ index.js ): import YouTubePlayer from '../components/YouTubePlayer'; export default function Home() { return (

My VOD Platform

); } Set up Video Hosting/Streaming YouTube handles storage, encoding, and adaptive streaming. Global CDN delivery. Embedding with iframe or API. Simply upload your videos to YouTube, get the videoId or playlistId , and embed them as shown above. For playlists, you can fetch items using the YouTube Data API. Implement Serverless API Logic Use Vercel Functions (Next.js API routes) to fetch playlists securely with your API key. API Route (pages/api/ playlist.js ): export default async function handler(req, res) { const { playlistId } = req.query; const key = process.env.YOUTUBE_API_KEY; const url = `https://www.googleapis.com/youtube/v3/playlistItems?part=snippet,contentDetails&maxResults=10&playlistId=${playlistId}&key=${key}`; const r = await fetch(url); const data = await r.json(); const items = data.items.map((it) => ({ videoId: it.contentDetails.videoId, title: it.snippet.title, thumb: it.snippet.thumbnails.medium.url, })); res.status(200).json(items); } This keeps your YouTube API key secure and delivers video metadata to the frontend. Connect to a Database Use an external DB (e.g., Supabase , PlanetScale , or Neon ) for app-specific data such as user info, favorites, or watch history. Example with Prisma Query : // /pages/api/favorites.js import { db } from '../../lib/db'; // your DB client export default async function handler(req, res) { const favorites = await db.favorite.findMany(); res.status(200).json(favorites); } Store your DATABASE_URL in Vercel environment variables. Deploy to Vercel Push code to GitHub/GitLab. Go to Vercel → New Project → Import Repo . Add environment variables: YOUTUBE_API_KEY , DATABASE_URL (if using a DB) Click Deploy . Access your app at https://vod-on-vercel.vercel.app. What happens after deploy (and how to verify) You’ll get a URL like https://vod-on-vercel.vercel.app. Open Home (/): your page renders the embedded YouTube player (via the IFrame API) and plays the sample videoId. Open Playlist API : https://vod-on-vercel.vercel.app/api/playlist?playlistId=PLxxxxxxxxxxxx You should see JSON like: [ {'videoId':'abc123','title':'Trailer','thumb':'https://i.ytimg.com/vi/abc123/mqdefault.jpg'}, {'videoId':'def456','title':'Episode 1','thumb':' https://i.ytimg.com/vi/def456/mqdefault.jpg '} ] This data is returned by your serverless function that calls the YouTube Data API v3 playlistItems.list with your API key stored in Vercel env vars (kept off the client).

Boost Campaign Performance Through Video