DEV Community

Cover image for 1 Minute Less Deploy from Next.js to Vercel
Lexy Erresta Pangemanan
Lexy Erresta Pangemanan

Posted on • Updated on

1 Minute Less Deploy from Next.js to Vercel

Image description


Efficient deployment is key in the fast-paced world of web development. Next.js, a powerful React framework, coupled with Vercel, a cloud platform for static sites and Serverless Functions, provides a seamless deployment experience. This article aims to guide you through deploying a Next.js application to Vercel in just 1 minute.

1 Minute Step Guide

  1. Add your project to GitHub Repository.
  2. Connect your GitHub account to Vercel.
  3. Add new project and click "import" from your Git Repository.
  4. Give the project name, also configure build settings in Vercel to match your project's requirements.
  5. Click 'Deploy' and taraaa, Vercel will give you link to the demo app.

Image descriptionNote: the simple next.js app just need a few seconds to build and deploy it in Vercel. But if your app have complexity structure with many environment variables, it will takes time, so just patience on it.

A Step-by-Step Guide for Beginner

Upload Next.js project into GitHub Repository

  1. Open and sign in to your GitHub account, you can create the new one if not have.Image description
  2. On the right side, click "New repository".Image description
  3. Named it the repository name to your project, also you can add the description and setting the repository into the 'public' or 'private'. Then press 'Create repository'.Image description
  4. After that you will see this display, don't think that this is difficult. It's just a quick step guide from GitHub that allows us to do a quick adding our project into our GitHub Repository. The next step you must to do is just open you project in the VSCode(Visual Studio Code).Image description
  5. Then open the terminal using ctrl + `(backtick) in your keyboard or click on 'View', select 'Terminal' and VSCode will open new terminal.Image description
  6. After that just type "git init", hit enter and "git .", hit enter on your terminal. The terminal will shown you this.Image description
  7. Then after it, just copying and paste the command after "git add" into your terminal in VSCode, then press enter in your keyboard.Image description
  8. The terminal will show this message if everything already done.Image description
  9. Open again your GitHub quick setup, then press 'F5' on your keyboard or refresh the page. After it you will see that your project it's already on GitHub Repository. Congratulations.Image description

Import GitHub Repository into Vercel Deploying

  1. Open, then log in using GitHub account. You can also create the new one using your GitHub account if you not owned it.Image description
  2. Create team, then click "Add New Project" right side at the top. Maybe on your vercel is there empty project because i already using it in several times, so the recent projects is shown.Image description
  3. Click 'Import' on you project you will deploy. If not show anything, you can just click "Add GitHub Account on the dropdown in left side on top. Maybe on first time the configure must be done.Image description
  4. After that, you will see the display like this. You can named the project, configure the framework preset, root directory, build and output settings, also the environtment variables. But on this tutorial, i will just quick and the project is just Next.js 14 new project created. So we just named the project then click 'Deploy'.Image description
  5. Then, vercel will build, deploy, and give the free domain to your project. After the process is success. It will shown like this.Image description
  6. After it, you can click 'Continue to Dashboard' and you will see this. Taraa, your Next.js project is already success to deploy in vercel.Image description
  7. Congratulations, now you can access your project in the live demo app using the Domains given by Vercel.Image description
  8. Also you can check the time used in building, deployment process, and domain given on your project via Build Logs. As you can see, our Next.js project success to deploy into the Vercel in just '33s' meaning 33 seconds.Image description

Thanks for your attention, i hope this articles will helpful to the beginner that want to put their app in Next.js project into the Vercel. See you on the next articles.

Top comments (0)