How to Build an AI Social Media Video Maker with Next.js and Google Veo (Step-by-Step Guide)

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