Skip to content
geeksforgeeks
  • Courses
    • DSA to Development
    • Get IBM Certification
    • Newly Launched!
      • Master Django Framework
      • Become AWS Certified
    • For Working Professionals
      • Interview 101: DSA & System Design
      • Data Science Training Program
      • JAVA Backend Development (Live)
      • DevOps Engineering (LIVE)
      • Data Structures & Algorithms in Python
    • For Students
      • Placement Preparation Course
      • Data Science (Live)
      • Data Structure & Algorithm-Self Paced (C++/JAVA)
      • Master Competitive Programming (Live)
      • Full Stack Development with React & Node JS (Live)
    • Full Stack Development
    • Data Science Program
    • All Courses
  • Tutorials
    • Data Structures & Algorithms
    • ML & Data Science
    • Interview Corner
    • Programming Languages
    • Web Development
    • CS Subjects
    • DevOps And Linux
    • School Learning
  • Practice
    • Build your AI Agent
    • GfG 160
    • Problem of the Day
    • Practice Coding Problems
    • GfG SDE Sheet
  • Contests
    • Accenture Hackathon (Ending Soon!)
    • GfG Weekly [Rated Contest]
    • Job-A-Thon Hiring Challenge
    • All Contests and Events
  • React Tutorial
  • React Exercise
  • React Basic Concepts
  • React Components
  • React Props
  • React Hooks
  • React Router
  • React Advanced
  • React Examples
  • React Interview Questions
  • React Projects
  • Next.js Tutorial
  • React Bootstrap
  • React Material UI
  • React Ant Design
  • React Desktop
  • React Rebass
  • React Blueprint
  • JavaScript
  • Web Technology
Open In App
Next Article:
Deploying your Next.js App
Next article icon

How to Deploy Next.js App to Vercel ?

Last Updated : 14 Jul, 2021
Comments
Improve
Suggest changes
Like Article
Like
Report

Introduction: Vercel is a deployment tool used by frontend developers to instantly deploy and host web applications without knowing complex configurations. 

Features of Vercel:

  • Easy to use and has a lifetime free tier service which is beneficial for beginners who want to deploy their side-project with minimal support.
  • Can create an account using GitHub, GitLab, Bitbucket, or with Email.
  • Allows developers to use a custom domain that is HTTPS enabled.
  • Can be used to build unlimited websites and APIs.
  • Changes in data lead to an automatic push of the web page thereby reducing the constraint of static generation.
  • High-Performance Edge Network leads to faster routing.
  • Each pull request has its preview URL which is useful while running tests or gathering feedbacks.

Step 1: Create a Next.js App and setup Vercel Account: Create the Next.js app by running the following command:

npx    create-next-app

or

yarn create next-app

Once the Next.js app is created, go to Vercel website and signup with GitHub/Email-id to create an account. To deploy our application, we need to install the Vercel CLI. Run the following command to install Vercel globally (You can also install Vercel locally in your project folder).

npm i -g vercel
 

To check if vercel is installed in our machine, run the command:

vercel --version

If vercel is installed correctly, it will install the latest version i.e, 23.0.0

Login in to your vercel account by running the following command 

vercel login

You will be prompted with the following question - Enter your email: Enter your mail for confirmation.

Step 2: Deployment: Once you've logged in, in order to deploy your Next.js project you need to run 'vercel' command.

vercel

The command will show the latest Vercel version and ask the following questions:

  1. Set up and deploy “~/projectname”? [Y/n]:
  2. Which scope do you want to deploy to?
  3. Link to an existing project? [y/n]
  4. What's your project name?
  5. In which directory is your code located?
  6. Want to override the settings? [y/n]

After you've completed these questions, head to your Vercel account and click on the Visit button to see your project live on Vercel.

Note: After deploying your project from the command line, Vercel creates a .vercel folder that contains the project.json file. This file contains the orgId and the projectId keys which are confidential and 'SHOULD NOT' be pushed to Git.

Step 3(Optional): Using Git and GitHub for Automation: Vercel automatically deploys any changes made to your Git repository. Each time a new pull or merge request is created, Vercel creates a new build and setups a new deployment.


Next Article
Deploying your Next.js App

A
ashitace696
Improve
Article Tags :
  • Web Technologies
  • ReactJS
  • React-Questions

Similar Reads

  • How to Deploy Node Backend on Vercel ?
    To deploy a Node.js backend to Vercel, you can follow the simple approach that involves setting up your Node.js project, configuring necessary files, and using the Vercel CLI. Vercel is known for its ease of use and automatic optimizations, making it an excellent choice for deploying full-stack appl
    2 min read
  • How to deploy MERN application on Vercel ?
    Vercel is a platform that caters to front-end developers by providing fast and dependable infrastructure to support the creation of innovative designs. With their services, teams can efficiently develop, preview, and deploy user-friendly interfaces. They offer support for over 35 front-end framework
    4 min read
  • How to Use the App Directory in Next.js?
    The App Directory in Next.js provides a powerful way to structure and manage your application's pages and components. It simplifies the routing and organization of your project, enabling you to build complex web applications with ease. Understanding the App DirectoryThe App Directory is a new struct
    3 min read
  • How to Deploy Node.js app on Netlify ?
    Netlify is a powerful platform that simplifies the process of deploying and managing web projects. It provides a wide range of features, including continuous deployment, automatic SSL, serverless functions, form handling, and much more. With Netlify, you can deploy static sites, single-page applicat
    3 min read
  • Deploying your Next.js App
    Deploying a Next.js app involves taking your application from your local development environment to a production-ready state where it can be accessed by users over the internet. Next.js is a popular React framework that enables server-side rendering, static site generation, and client-side rendering
    3 min read
  • How to Create Todo App using Next.js ?
    In this article, we will create a to-do application and understand the basics of Next.js. This to-do list can add new tasks we can also delete the tasks by clicking on them. Next.js is a widely recognized React framework that e­nables server-side­ rendering and enhance­s the developme­nt of interact
    4 min read
  • How to Deploy an Express Application to Vercel ?
    Vercel is a popular cloud platform that is known for its excellent support in building and deploying scalable Frontend infrastructure. In this article, we will look into how to deploy an Express.js web Application to Vercel. We will use the Serverless computing feature of Vercel to deploy our expres
    2 min read
  • How to Add Tweets in Next.js ?
    Adding tweets in Next.js involves using Twitter's embed feature or API to display tweets. You can embed tweets directly in components or fetch and display them using server-side rendering or client-side data fetching. In this article, we are going to learn how we can add Tweets in NextJs. ApproachTo
    2 min read
  • How to Fix CORS Errors in Next.js and Vercel?
    Cross-Origin Resource Sharing (CORS) is a security feature that restricts web apps from making requests to a different domain than the one that served the web page to it. This is needed for security, although sometimes it can block legitimate requests, especially when working with APIs. In this arti
    4 min read
  • How to use Next.js API Routes?
    Next.js API Routes are a feature of Next.js that allows you to create server-side logic and APIs within your Next.js application. These API routes are implemented using files in the `pages/api` directory of your Next.js project. When you deploy your Next.js application, these API routes are automati
    8 min read
geeksforgeeks-footer-logo
Corporate & Communications Address:
A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)
Registered Address:
K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305
GFG App on Play Store GFG App on App Store
Advertise with us
  • Company
  • About Us
  • Legal
  • Privacy Policy
  • In Media
  • Contact Us
  • Advertise with us
  • GFG Corporate Solution
  • Placement Training Program
  • Languages
  • Python
  • Java
  • C++
  • PHP
  • GoLang
  • SQL
  • R Language
  • Android Tutorial
  • Tutorials Archive
  • DSA
  • Data Structures
  • Algorithms
  • DSA for Beginners
  • Basic DSA Problems
  • DSA Roadmap
  • Top 100 DSA Interview Problems
  • DSA Roadmap by Sandeep Jain
  • All Cheat Sheets
  • Data Science & ML
  • Data Science With Python
  • Data Science For Beginner
  • Machine Learning
  • ML Maths
  • Data Visualisation
  • Pandas
  • NumPy
  • NLP
  • Deep Learning
  • Web Technologies
  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • ReactJS
  • NextJS
  • Bootstrap
  • Web Design
  • Python Tutorial
  • Python Programming Examples
  • Python Projects
  • Python Tkinter
  • Python Web Scraping
  • OpenCV Tutorial
  • Python Interview Question
  • Django
  • Computer Science
  • Operating Systems
  • Computer Network
  • Database Management System
  • Software Engineering
  • Digital Logic Design
  • Engineering Maths
  • Software Development
  • Software Testing
  • DevOps
  • Git
  • Linux
  • AWS
  • Docker
  • Kubernetes
  • Azure
  • GCP
  • DevOps Roadmap
  • System Design
  • High Level Design
  • Low Level Design
  • UML Diagrams
  • Interview Guide
  • Design Patterns
  • OOAD
  • System Design Bootcamp
  • Interview Questions
  • Inteview Preparation
  • Competitive Programming
  • Top DS or Algo for CP
  • Company-Wise Recruitment Process
  • Company-Wise Preparation
  • Aptitude Preparation
  • Puzzles
  • School Subjects
  • Mathematics
  • Physics
  • Chemistry
  • Biology
  • Social Science
  • English Grammar
  • Commerce
  • World GK
  • GeeksforGeeks Videos
  • DSA
  • Python
  • Java
  • C++
  • Web Development
  • Data Science
  • CS Subjects
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox
Improvement
Suggest Changes
Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.
geeksforgeeks-suggest-icon
Create Improvement
Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.
geeksforgeeks-improvement-icon
Suggest Changes
min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences
Admission Experiences
Career Journeys
Work Experiences
Campus Experiences
Competitive Exam Experiences