element to display the result. // pages/index.js import { useState } from 'react'; export default function Home() { const [prompt, setPrompt] = useState(''); const [videoUrl, setVideoUrl] = useState(''); async function generateVideo() { const res = await fetch('/api/generate', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ prompt }), }); const data = await res.json(); setVideoUrl(data.videoUrl); } return (

Text-to-Video Generator

setPrompt(e.target.value)} /> {videoUrl &&

); } Tip: Keep dependencies minimal and UI logic lean to ensure fast execution in edge environments. Connect to the Text-to-Video API To turn user prompts into videos, your app needs to communicate with a text-to-video provider. By connecting through a Next.js API route, the prompt entered in the frontend is securely sent to the provider’s API. The API then processes the request using its video generation model and returns a video URL, which your app can display in the browser. This setup keeps API keys safe and ensures smooth integration between your app and the video service. Create an API Route // pages/api/generate.js export default async function handler(req, res) { if (req.method !== 'POST') { return res.status(405).json({ error: 'Method not allowed' }); } const { prompt } = req.body; try { const response = await fetch('https://api.text-to-video-provider.com/generate', { method: 'POST', headers: { 'Authorization': `Bearer ${process.env.API_KEY}`, 'Content-Type': 'application/json', }, body: JSON.stringify({ prompt, duration: 5 }), // e.g. 5s clip }); const data = await response.json(); res.status(200).json({ videoUrl: data.url }); } catch (error) { console.error(error); res.status(500).json({ error: 'Video generation failed' }); } } Configure Environment Variables In development, add keys to .env.local: API_KEY=your-provider-api-key In Vercel, set environment variables in Project Settings → Environment Variables . Note: Your API key should never be hardcoded. Store it in Vercel Environment Variables instead. Many text-to-video APIs generate async videos (first returning a job ID, then polling until the video is ready). You can handle this with background tasks or frontend polling. Development Validation Locally Start the dev server: npm run dev Verify : Prompt input triggers an API call. API route reaches the provider. Returned video URL plays as expected. Deploy to Vercel Deploying to Vercel makes your app accessible to anyone through a live URL. When a user enters a prompt, it travels from the app’s frontend to the backend API route, which sends the request to the text-to-video provider. The provider processes the prompt, generates the video, and sends back a URL. Your app then retrieves this URL and plays the generated video directly in the browser.Now you need to do: Enter a prompt in the input box. Example: Click Generate Video . After a short wait, the generated video will play directly in the browser. Sample Output (Demo Preview) :

At this point, your text-to-video app is fully functional on Vercel , you can share the live URL and anyone worldwide can try it.

Boost Campaign Performance Through Video