Ship a Landing Page with v0 and Vercel

Build an e-commerce landing page with AI, deploy with one click, and get automatic HTTPS and edge protection.

Introduction

⚡️ 30 Second Summary

Updating your website used to mean waiting days for someone else to deploy it. Now you can push changes and see them live in minutes.

In this project, you'll build a landing page without writing code from scratch: describe what you want in plain English, let v0.dev generate the code, and deploy it to Vercel with one click.

What You'll Build

Together, we'll create a complete e-commerce landing page using v0.dev, then deploy it to Vercel with automatic security.

By the end of this project, you'll have:

  • 🎨 A production-ready landing page generated from plain English prompts.
  • 🚀 Live deployment on Vercel with automatic HTTPS and edge caching.
  • 💎 Secret Mission: Iterate on your v0 prompt to improve your design.

Want a complete demo of how to do this project, from start to finish? Check out our 🎬 walkthrough with Kahu or 🎬 fast track it with Maximus

Is v0.dev free?

Yes! v0.dev has a free tier that's perfect for this project. You can generate multiple iterations of your design without paying anything.

Not sure if this project is right for you? Check if it matches your goals

If you're up for a bit of a challenge, quiz yourself on the key concepts up ahead in this project.

Set Up Your Accounts

Time to ship like the pros!

In this step, get ready to:

  • Create a GitHub account
  • Create a Vercel account linked to GitHub
  • Sign in to v0.dev with your Vercel account

Why do we need to create a Vercel account?

Vercel is the platform we'll use to deploy your landing page and make it public to the world. We're creating it in Step 1 because v0.dev, which you'll use to generate your landing page, is part of the Vercel ecosystem and requires a Vercel account to sign in.

Set up your Vercel account

Alright, alright, alright! The most important thing about our Vercel account is that it's connected to Github. This makes our deployment easy peasy later on.

So to kick things off...

✔ Yep, I already have GitHub account

Great googly moogly! That's fantastic news.

You, my dear friend, are ready to set up your Vercel account. Onwards!

Nope, I don't have a GitHub account

No problem at all.

GitHub is super useful for building out your portfolio, storing your code, and collaborating with other builders. It's definitely worth creating an account if you enjoy building things, so count this as a bonus!

What a win.

  • Follow the steps to create your account.
  • Verify your email.

Ta da! Welcome to the world of programming. You'll love it here.

Note

Got stuck? Don't worry about it - there's always help on hand. Jump into the NextWork Community and post your question. We're here to help.

Once you have your GitHub account set up, we can move into setting up your Vercel account. The end of the beginning...

✔ Yep, I already have a Vercel account

We are on a roll! Next, let's connect two things that are meant to be together...

....you and NextWork...

...and Github and Vercel.

Pure romance.

Vercel has recently updated their UI, what one do you see?

Login page

  • Enter your login information.
  • Sign in to continue.

Dashboard (already signed in)

You're already logged in. That's one less step.

Now let's verify GitHub is connected:

What do you see?

Profile picture in the top right (Old UI)

  • Click your profile icon in the top right.
  • Go to Account Settings.

Profile picture in the bottom left (New UI)

  • Click your profile icon in the bottom left.
  • Go to Account Settings
  • Select Authentication on the left menu.
  • Check the GitHub row. What do you see?

✔ I see 'last used...'

That means GitHub is already connected. You're ready to continue!

ⓧ I see a Connect button

No worries, let's fix that!

  • Click Connect next to GitHub.
  • Select your GitHub account.
  • Click Continue.

You should now see Last used just now next to GitHub. That means you're connected!

What is GitHub?

GitHub is where developers store and share code. Connecting it to Vercel means your website automatically updates whenever you push new code. No manual uploads needed.

Nope, I don't have a Vercel account

It's time for adventure. Good thing you're such a champ.

Let's create your Vercel account:

  • Select I'm working on personal project.
  • Enter a username for your Vercel account (no judgement).
  • Select Continue with GitHub to link your accounts.
  • Enter your GitHub credentials.
  • Click Sign in.

BAM! Look at you go. Your Vercel account is ready and connected to GitHub.

Got an authorization popup?

That's normal! Vercel needs permission to access your GitHub repos. This connection lets Vercel automatically deploy your code whenever you push to GitHub.

Login to v0.dev

Whoa! ANOTHER service?!

'Tis the age of AI my dear fellow builder. If we haven't signed up for another three tools, we're not doing it right.

Plus, turns out that v0.dev is Vercel's AI-powered UI generation tool so we can reuse the same Vercel account from above. All hail our AI overlords.

Wait. What is v0?

v0 is an AI tool that creates production-ready React/Next.js code from natural language prompts. I say "code me a blog about cats" and v0 says "of course, crazy cat lady."

  • Navigate to v0.dev in your browser.

What do you see?

Landing (not signed in)

No worries, signing in is quick and painless. Let's get you in!

  • Click Sign in.
  • Enter the same email you used for your Vercel account.
  • Click Continue with Email.
  • Check your inbox! You should receive a verification email from Vercel with a 6 digit code.
  • Copy the code from the email.
  • Paste it into the verification form.

Congrats! You're now signed in with your Vercel account.

Dashboard (already signed in)

You're already logged in. That's one less step!

Your accounts are set up and you're logged into v0. Next up, we'll use v0 to generate your e-commerce app!

Build Your Landing Page with AI

You're all set up. Now let's build something epic!

In this step, get ready to:

  • Generate a landing page using v0.dev
  • Create product and checkout pages
  • Customize your design with prompt iteration

Generate Your E-commerce App

First, we'll prompt v0 to create your application. The key is giving clear constraints to guide the output.

You'll type your prompt into v0's chat box, just like chatting with ChatGPT or Claude. v0 reads your description and generates a complete web app.

  • In v0's chat box, enter a prompt. Here's one to get you started.
  • Replace the **Replace this** placeholder with your own idea (e.g., "Use a purple color scheme" or "Make it look like a coffee shop").
Create an e-commerce web app with:
- A landing page with hero section
- A product detail page with a Buy Now button
- A checkout page with a payment form
- Modern, clean design with a tech/startup aesthetic
- Everything needs to be on one page WITHOUT scrolling
- [[CUSTOM_PROMPT="**Replace this** with your own style preference"]]
  • Click the Generate button (or press Enter).

What is v0 actually doing?

Behind the scenes, v0 is analyzing your prompt, generating React components, styling them with Tailwind CSS, and assembling a complete Next.js application, all from your plain English description.

💡 While you're waiting...

Check out the NextWork Community. Ask someone whether they prefer noodles, rice, or pizza. See what the community thinks!

✔ I see generated components

If you weren't a wizard before, you certainly are one now.

v0 has magically generated your e-commerce app. Absolutely crazy. Let's explore...

You should see a landing page with a hero section and product highlights.

Wait! Mine looks nothing like that...

That's completely ok! v0's model generates unique designs each time, so your page won't look exactly like the screenshots here. As long as you have the key elements (landing page, product page, checkout page), you're golden.

  • Navigate to your Landing page.
  • Navigate to your Product page.

You should see a Buy Now button ready for user interaction.

  • Navigate to your Checkout page.

You should see a payment form UI that demonstrates a complete checkout experience.

Your checkout page demonstrates the UI flow. For a production store, you'd integrate a payment processor like Stripe or PayPal.

ⓧ I don't like the design

Fortunately, you are the artist here. You are the captain.

You don't have to settle for less...as long as you can pay for it. Eventually Vercel will start to charge you, but given we haven't entered a payment card, we'll definitely know about it. Just keep an eye out!

To change your design, change your prompt.

  • Hover over your original message.
  • Click the Edit Message (pencil) icon.
  • Update your prompt with more specific requirements.
  • Click the send button to regenerate with your updated prompt.

Prompt tips

Be more specific about the style (e.g., "minimalist", "dark mode", "colorful"). Specify colors (e.g., "blue and white color scheme"). Reference design systems (e.g., "similar to Apple's product pages" or "like modern SaaS landing pages").

Still stuck?

Get help with your error or share your error with the NextWork community!

ⓧ I got an error

These things happen. Let's fix it.

  • Connection issues?
  • Check your internet connection.
  • Try refreshing the page.
  • Still not working?
  • Make sure you're signed in with your Vercel account.
  • Try a simpler prompt first, then add complexity.

Still stuck?

Get help with your error or share your error with the NextWork community!

Your e-commerce app is generated and ready to go. Next up, we'll deploy it to the world and make it live!

Go Live with One-Click Deploy

Your e-commerce app is generated and ready to go, but only you can see it. Where's the fun in that?!

Let's change it.

In this step, you'll deploy to Vercel and get automatic HTTPS, global CDN, and DDoS protection. Super cool.

In this step, get ready to:

  • Export your v0 project to GitHub
  • Deploy to Vercel with one click
  • Access your live site with HTTPS

Export to GitHub

Okay, so we want our v0 project to be in Github. Shall we download it, then upload it again to our Github repo?

Of course not! Software like v0 pushes our generated projects directly to a new GitHub repository. Time to take full advantage of it.

  • In v0, click the GitHub icon in the left sidebar.

You should see a "No GitHub Repository" dialog.

  • Click Connect.
  • Click Create Repository.

You should see your repository info with the branch and status showing "Up to date".

And the result is...

✔ Repository created

Fantastic. Your code is now in GitHub!

First GitHub, then the world.

  • Click the GitHub repository link.

You should see your repository in GitHub with all your project files.

ⓧ I'm having issues

We'll sort this out together.

  • Authorization error?
  • Go to vercel.com and click your profile icon in the top right.
  • Go to Account Settings.
  • Select Authentication on the left menu.
  • Click Connect next to GitHub.
  • Authorize Vercel to access your repositories.
  • Return to v0 and try again.
  • Repository name already exists?
  • Choose a different name (e.g., my-ecommerce-app or landing-page).
  • Click Create Repository again.

Still stuck?

Get help with your error or share your error with the NextWork community!

Deploy to Vercel

Now that our v0 app has a branch and repo in GitHub, we're going to publish your app to the web, directly from v0.

Why do we need GitHub to deploy?

You can technically deploy without GitHub using the Vercel CLI, but we want continuous deployment: every time you push changes, Vercel deploys automatically. That requires GitHub.

Here's the thing: your code is currently on a branch, not on main. Vercel only deploys from main, so we need to merge our changes. But first, we need to make a small change to create a pull request.

Make a Change

  • In your v0 project, enter the prompt:
Change the hero headline to "Welcome to My Store"
  • Click the send button.

Open a Pull Request

Once your change is ready, it's time to merge it into main.

  • Click the Open PR button in the top bar.
  • Click Open Pull Request.

Merge and Deploy

v0 will create a preview deployment so you can check your changes before going live.

  • Wait for the preview to show Ready.
  • Click Merge PR to merge your changes into main.

When you merge to main, Vercel automatically deploys your site. That's continuous deployment in action!

How'd it go?

Let's check if the merge succeeded by visiting GitHub.

  • Click your profile icon in the top right corner.
  • Select Your repositories from the dropdown.
  • Click on your v0 repository.

If you see your code on the main branch with your recent changes, the merge worked!

✔ Merge succeeded

You're a genius. Or AI is.

Your code is now on main and Vercel is deploying it. The deployment happens automatically, no buttons to click!

ⓧ I'm having issues

Deployments can be tricky. Let's debug.

  • Deployment failed?
  • Check the error message in the preview panel for details.
  • Build errors?
  • TypeScript errors: v0 occasionally generates code with type issues. Try sending v0 a follow-up prompt to fix them.
  • Missing dependencies: Rare with v0, but check if any imports failed.
  • Make another small change and try opening a new PR.
  • Still nothing?
  • Not to worry. If errors persist, try making another small change and opening a new PR.

Still stuck?

Get help with your error or share your error with the NextWork community!

Access Your Live Site

Let's check if your site is live! Time to visit your Vercel dashboard.

  • Go to vercel.com and find your project.
  • Click on your project.
  • Click the URL to open your live site in a new tab.
  • Save your deployment URL here. You'll need it for the Secret Mission!
[[DEPLOYMENT_URL="paste your Vercel URL here"]]

Woohoo! You should see your site live!

  • Look for the padlock/settings icon in your browser's address bar to verify the connection is secure.

✔ Aha! I see my site with a padlock

Excellent!

The little padlock means your site is secure. Vercel provides HTTPS by default, which means data in transit is encrypted. Vercel's edge network also includes DDoS protection. You get enterprise-grade infrastructure without any configuration.

ⓧ I'm having issues

Almost there! Let's troubleshoot.

  • No padlock icon?
  • Make sure you're accessing the site via https:// not http://
  • Try refreshing the page
  • Check that your URL ends with .vercel.app
  • Wait a minute and try again. SSL certificates can take a moment to provision
  • Site shows an error?
  • Go back to your Vercel dashboard
  • Check the deployment status. It might still be building
  • If the deployment failed, check the logs for errors
  • Try clicking Redeploy on the latest deployment

Still stuck?

Get help with your error or share your error with the NextWork community!

Understand What Vercel Handles

Pause for a minute and take a zen moment to appreciate what just happened. Vercel now handles HTTPS (encrypted connections), CDN (global edge caching), DDoS protection, and continuous deployment (every push to main auto-deploys).

This is your security baseline, handled for you, not by you.

Your app is live and the world can see it!

Secret mission

Your landing page is live, but is it great?

In this secret mission, you'll review your design, then go back to v0.dev to make targeted improvements with a follow-up prompt.

In this secret mission, get ready to:

  • Review your live site and identify two improvements.
  • Send a follow-up prompt in v0 with your changes.
  • Merge your PR and see Vercel auto-deploy.

Iterate on Your Design with v0

Clean Up Your Resources

Clean Up Your Resources

This project uses free-tier resources, so ongoing costs are minimal. Here's how to clean up if you'd like to.

What would you like to do?

Keep everything running

Since this project uses free resources, there's no cost to keeping everything running.

We recommend this path if:

  • You want to keep customizing your landing page
  • You want to show off your site to friends
  • You're building a portfolio of live projects

What stays active:

  • Your Vercel project continues serving your site
  • Your GitHub repository stores your code

No action needed! Just close this project and come back whenever you're ready!

Pause (keep code, stop serving)

You can delete your Vercel deployment while keeping your code in GitHub.

We recommend this path if:

  • You're finished with customizing your landing page
  • You don't have any immediate plans to work on this project
  • You want to save your progress but don't need it live

You will have to create your Vercel project again to redeploy.

How to remove your Vercel Project:

  • Go to your Vercel dashboard
  • Select your project
  • Go to Settings
  • Scroll to Delete Project
  • Confirm deletion

Your site URL will stop working, but your code remains in GitHub. You can redeploy anytime by:

  • Going to vercel.com/dashboard
  • Clicking Add New → Project
  • Selecting your existing GitHub repository
  • Clicking Deploy

Remove everything

To fully clean up all resources:

1. Delete your Vercel Project:

  • Go to vercel.com/dashboard
  • Select the project
  • Go to Settings
  • Scroll to Delete Project
  • Confirm deletion

2. Delete your GitHub Repository:

  • Go to github.com and navigate to your repository
  • Click Settings
  • Scroll to Danger Zone
  • Click Delete this repository
  • Type the repository name to confirm

That's a wrap!

That's a wrap!

Nice work! You've successfully deployed a production-ready e-commerce landing page!

What you learned:

  • 🎨 Generating complete UIs with v0.dev from plain English prompts
  • 🚀 One-click deployment with Vercel, with built-in HTTPS and CDN
  • 🔄 Git-based continuous deployment workflow via GitHub
  • 💎 Iterating on your design with follow-up prompts in v0.dev

Ready to quiz yourself?

What's next?

You've deployed your first AI-powered landing page! Ready to level up your AI development skills?

See you there!

p.s. Does it say "Still tasks to complete!" at the bottom of the screen?

This means you still have screenshots left to upload, or questions left to answer!

  1. Press Ctrl+F (Windows) or Command+F (Mac) on your keyboard.
  2. Search for the text Return to later.
  3. Jump straight to your incomplete tasks!
  4. 🙋‍♀️ Still stuck? Ask the community!