Deploying a Next.js application on Vercel

2 min readAug 19, 2023

Deploying a Next.js application on Vercel is straightforward and optimized, given that Vercel is built by the same team behind Next.js. Here’s a step-by-step guide:

1. Set Up Your Next.js Application

Make sure you have a Next.js application ready to be deployed. If you don’t have one, you can quickly create a new app using:

npx create-next-app my-next-app
cd my-next-app

2. Version Control with Git

If your Next.js app isn’t already in a Git repository, initialize one:

git init
git add .
git commit -m "Initial commit"

3. Sign Up / Log In to Vercel

If you don’t have a Vercel account, sign up for one at Vercel’s website. If you already have an account, log in.

4. Install Vercel CLI

To deploy using the Vercel Command Line Interface (CLI), you need to install it first:

npm install -g vercel

5. Deploy with Vercel CLI

Now that you have the Vercel CLI installed:

In your terminal, navigate to your Next.js project directory.
Run the following command:

vercel

If it’s your first time using the CLI, it’ll ask you to log in. Follow the instructions provided.
Then, you will be asked to link your local directory to a Vercel project. Choose “Yes” and select your existing project or create a new one.
Confirm other settings as per your preferences.

After you’ve set things up, each time you want to deploy a new version of your app, simply run:

vercel --prod

6. Access Your Live Site

After deployment, Vercel CLI will provide you with a live URL. You can visit this URL in your browser to see your live Next.js app.

7. Continuous Deployment (Optional but Recommended)

Vercel offers built-in integrations with GitHub, GitLab, and Bitbucket. When you push to your repository or create a pull request, Vercel will automatically build and deploy your app, and even create preview links for each push/PR.

To set this up:

Go to your Vercel dashboard.
Connect your Git provider and select your repository.
Vercel will handle the rest. Pushes to the main branch will update the production URL, and pushes to other branches or PRs will create preview deployments.

That’s it! You now have your Next.js application deployed on Vercel.

Thank you for taking the time to read my post! If you have any questions or want to learn more about me and my work, feel free to reach out to me through my social media channels:

GitHub: https://github.com/fitsaleem
LinkedIn: https://www.linkedin.com/in/saleem-raza/
YouTube: https://www.youtube.com/fitcodding

I’m always happy to connect and discuss ideas related to Blockchain, web3 development, and technology in general. Looking forward to hearing from you!