Send us a message and we'll get back to you shortly.
Learn how to create an AI-powered social media video maker using Next.js and Google Veo. This step-by-step tutorial covers integrating Veo’s text-to-video API, building a modern web app, and generating cinematic sneaker ads ready for social media publishing.
In this article, we will build a modern Next.js application integrated with Google Veo’s AI video generation API to create a dynamic advertisement video for a sneaker. The app will allow users to input a text prompt describing the video and automatically generate a high-quality, cinematic video showcasing the product.
By the end of this article, you will be able to generate an advertisement to publish it on social media
Artificial Intelligence (AI) is revolutionizing video content creation, especially for social media platforms where engaging and dynamic videos drive user interaction. AI-powered video makers can transform simple text prompts into cinematic-quality videos with synchronized audio, realistic visuals, and natural motion—all within minutes. This automation drastically reduces the time, cost, and complexity traditionally associated with video production, enabling marketers and creators to produce high-quality, personalized content at scale
AI-powered video content is rapidly transforming social media marketing by enabling brands to create visually compelling and personalized videos at scale. Studies show that businesses using AI for social media content generation experience a 15-25% increase in engagement rates, highlighting AI’s direct impact on audience interaction. Moreover, over 60% of organizations adopt AI primarily to reduce staff workload and increase efficiency, allowing marketing teams to focus more on strategy and creativity rather than repetitive production tasks.
AI-driven video tools are also responsible for a significant portion of short-form video content on platforms like Instagram and TikTok, where AI-enhanced editing boosts video production efficiency by up to 30%. These advances make AI indispensable for brands aiming to maximize reach and engagement in an increasingly competitive social media landscape.
Automating video production with AI offers several key advantages:
These benefits empower marketers to produce more content faster and at a lower cost without compromising on quality, enabling consistent brand messaging and higher campaign frequency.
Google Veo 2 is Google’s state-of-the-art AI-powered video generation model developed by Google DeepMind, designed to create high-quality, realistic videos from text prompts or reference images. It represents a significant leap in AI video creation technology, capable of producing videos with cinematic detail, smooth motion, and a deep understanding of real-world physics and human dynamics.
Open your command line interface and clone the main branch of this project by running git clone -b main https://github.com/The-Learning-Algorithm/ai-video-maker.git
Now, change the directory to the project root cd ai-video-maker and run npm i When it's done, run npm run dev and visit localhost:3000
Let's save the user's prompt by creating a new state called prompt, where we save the user input in the textarea. Open the Dashboard.tsx in the components folder and change its content to the following
The input handler sets the prompt and logs the user input. We will change it later on to send the user prompt to our Veo Model
Let's create an endpoint that receives the user prompt via a POST request and calls a function to generate a video. In the project root, create a folder called api and create video-maker/route.tsx in it with the following content
Now let's change our Dashboard.tsx to create a new function to handle button clicks for the Generate button. When the user clicks on the button, we check if the prompt exists and send it to the endpoint we created. Change the Dashboard.tsx content to the following
The next step is implementing a function that uses the prompt and Google Veo to generate a video and save it to our filesystem
In the root of the project, open package.json And search for genaiThis is the library we are going to use for video generation
Before continuing, if you don't have the Gemini API, follow Google's Instructions on how to get started.
When you are done, copy the Gemini API key and in the project root create a .env file and save the key like the following GEMINI_API_KEY="YOUR_GEMINI_API_KEY"
Now let's create a new folder called lib in the project root directory, and create gemini.ts in it
In the app directory, create a new folder called utils and create video-maker.tsx in it.
We are using Veo 2, which is not capable of adding sounds to the video. We are defining configs for video duration, number of videos, and whether it's allowed to show a person in the video or not. When the video generation is done, you should see a file called video0.mp4 In the root of the project.
Now let's update our route.tsx to use the util function
The last step before running the prompt is to change our Dashboard.tsx to properly handle the promise and show the right message to the user
Now let's visit localhost:3000 and write the following prompt there, or your prompt, to generate a video
When the generation is done, feel free to open the video in the root of the project and check it out. I'm going to use Free to Use and Filmage to add some background music to the video and drop the edited file in the root of the project.
To make the Review and Publish tab work, we need to implement an endpoint that searches for our videos and returns all videos to the Dashboard UI to render them in a player. Let's move all of the videos to the public/videos folder and create a new folder under API called videos With route.tsx in it
Now let's implement our findVideos function to retrieve all of the videos in the public/videos folder. In the utils folder, create a new file called find-videos.tsx with the following content
Next, let's implement another API to publish the selected video to a social media platform like TikTok. In the API folder, create a new directory called publish-video with route.tsx in it
This is a sudo publisher function, feel free to check your preferred social media platform and use their API to publish your video.
Now let's wire up our APIs with this tab to show the videos and add a button to publish them. When the component mounts, we find all of the videos, and when the user clicks on the Publish Video button, we call the publish-video endpoint. Open the Dashboard.tsx file and change the content with the following
Now, visiting localhost:3000 should show something like the following
We are going to stop here, but our implementation is not done yet. Here are some tasks for you
Building an AI-powered social media video maker with Next.js and Google Veo unlocks new possibilities for automated, high-quality content creation. By leveraging Next.js’s performance alongside Google Veo’s advanced text-to-video capabilities, you can generate cinematic advertisements—like a sneaker promo—at scale and with minimal manual effort. This workflow empowers marketers and developers to rapidly produce, review, and publish engaging video content tailored for today’s fast-moving social platforms, giving your brand or project a competitive edge in digital storytelling
Looking to learn more about marketing, nextjs, veo? These related articles explore complementary topics, techniques, and strategies.
Master prompt engineering for chatbots with 6 core strategies to craft precise AI prompts, improve response accuracy, and enhance user engagement. Learn best practices now!
Master LLM prompt engineering and boost Google Search Console performance. Craft high-impact prompts, monitor keywords, and elevate your site’s SEO results.
Discover Alan Turing's five pivotal AI breakthroughs that shaped modern technology. Explore his revolutionary contributions to artificial intelligence today!
Learn how to build a powerful AI sales data chatbot using Next.js and OpenAI’s Large Language Models. Discover prompt engineering best practices, tool calling for dynamic chart generation, and step-by-step integration to unlock actionable insights from your sales data.
Learn how to build a powerful contract review chatbot using Next.js and OpenAI’s GPT-4o-mini model. This step-by-step tutorial covers file uploads, API integration, prompt engineering, and deployment — perfect for developers wanting to create AI-powered legal assistants.
Learn how to build an AI-powered quiz generator using OpenAI and Next.js. Upload PDF content and automatically generate multiple-choice questions with answers and difficulty levels in JSON format.