Vercel deployment (default) in NextJS - Mini Project: Build & Apply

Deploy a Next.js App on Vercel

📖 Scenario: You have created a simple Next.js app and want to share it with your friends by putting it online. Vercel is a popular platform that makes it easy to deploy Next.js apps with just a few steps.

🎯 Goal: Learn how to prepare your Next.js app and deploy it on Vercel using the default settings. You will create a basic page, set up your project for deployment, and finally deploy it so anyone can visit your app online.

📋 What You'll Learn

Create a Next.js page component named HomePage that displays the text Welcome to My Next.js App

Add a configuration file vercel.json with default settings for deployment

Initialize a Git repository and commit your code

Deploy the app to Vercel using the default deployment process

💡 Why This Matters

🌍 Real World

Deploying web apps quickly and easily to share with users worldwide.

💼 Career

Many companies use Vercel to deploy Next.js apps, so knowing this process is valuable for frontend and full-stack developers.

1

Create the Next.js Home Page

Create a file named pages/index.js with a React functional component called HomePage that returns an <h1> element containing the text Welcome to My Next.js App.

NextJS

// Create the HomePage component in pages/index.js
// Your code here

Hint

Remember, Next.js uses the pages folder to create routes automatically. The index.js file is the home page.

2

Add Vercel Configuration File

Create a vercel.json file in the root of your project with the following content: { "version": 2 } to specify the deployment version.

NextJS

export default function HomePage() {
  return Welcome to My Next.js App;
}

// Create vercel.json with { "version": 2 }
// Your code here

Hint

The vercel.json file helps Vercel know how to deploy your app. The version 2 is the current default.

3

Initialize Git and Commit Your Code

Run the commands git init, git add ., and git commit -m "Initial commit" in your project folder to create a Git repository and save your code.

NextJS

export default function HomePage() {
  return Welcome to My Next.js App;
}

{
  "version": 2
}

// Initialize Git and commit your code
// Your code here

Hint

Git helps you save versions of your code. Vercel uses Git to get your project files.

4

Deploy Your Next.js App on Vercel

Use the command vercel in your terminal to deploy your app. Follow the prompts and accept the default options to complete the deployment.

NextJS

export default function HomePage() {
  return Welcome to My Next.js App;
}

{
  "version": 2
}

// Run in terminal:
// git init
// git add .
// git commit -m "Initial commit"

// Deploy with vercel command
// Your code here

Hint

The vercel command uploads your app and makes it live on the internet. You can find your app URL in the terminal after deployment.

Practice

1. What is the main purpose of deploying a Next.js app on Vercel using the default settings?

easy

A. To create a backup of your app files

B. To run the app only on your local machine

C. To convert the app into a mobile application

D. To make the app live on the internet with minimal setup

Solution

1. Step 1: Understand Vercel deployment purpose

   Vercel deployment is designed to host your Next.js app online so others can access it.

2. Step 2: Recognize default deployment behavior

   Using default settings, Vercel automatically builds and hosts your app live on the internet.

3. Final Answer:

   To make the app live on the internet with minimal setup -> Option D

4. Quick Check:

   Vercel deployment = live app hosting [OK]

Hint: Vercel default deploy means live app online quickly [OK]

Common Mistakes:

• Thinking deployment only runs locally
• Confusing deployment with app backup
• Assuming deployment converts app to mobile

2. Which command correctly deploys a Next.js app to Vercel using the CLI with default settings?

easy

A. vercel deploy --prod

B. vercel

C. vercel --prod

D. deploy vercel

Solution

1. Step 1: Recall Vercel CLI default deploy command

   The basic command to deploy is simply vercel, which starts the deployment process.

2. Step 2: Understand optional flags

   While --prod deploys to production, the default deploy command without flags is just vercel.

3. Final Answer:

   vercel -> Option B

4. Quick Check:

   Default deploy command = vercel [OK]

Hint: Use just 'vercel' to deploy with defaults [OK]

Common Mistakes:

• Adding unnecessary flags like --prod by default
• Using wrong command order like 'deploy vercel'
• Confusing 'vercel --prod' as default

3. After running vercel to deploy your Next.js app, what will you see in the terminal if the deployment is successful?

medium

A. A URL link where your app is live

B. An error message about missing files

C. A prompt to install Next.js

D. A message saying deployment is disabled

Solution

1. Step 1: Understand Vercel deployment output

   When deployment succeeds, Vercel shows a URL link to access your live app.

2. Step 2: Identify success vs error messages

   Error messages or prompts indicate failure or missing setup, not success.

3. Final Answer:

   A URL link where your app is live -> Option A

4. Quick Check:

   Successful deploy shows live app URL [OK]

Hint: Look for live URL in terminal after deploy [OK]

Common Mistakes:

• Expecting no output after deploy
• Confusing error messages as success
• Thinking deployment disables app

4. You ran vercel but your app fails to deploy with a build error. What is the most likely cause?

medium

A. Your internet connection is too fast

B. You forgot to install Vercel CLI globally

C. Missing package.json or build scripts in your project

D. You used the wrong terminal emulator

Solution

1. Step 1: Identify build error causes in Vercel

   Build errors usually happen if essential files like package.json or build scripts are missing.

2. Step 2: Rule out unrelated causes

   Not installing CLI prevents running commands, but here command ran. Internet speed or terminal choice doesn't cause build errors.

3. Final Answer:

   Missing package.json or build scripts in your project -> Option C

4. Quick Check:

   Build error = missing config files [OK]

Hint: Check package.json and build scripts if build fails [OK]

Common Mistakes:

• Blaming internet speed for build errors
• Assuming CLI install issues cause build errors
• Thinking terminal type affects build

5. You want to deploy a Next.js app on Vercel with default settings but exclude a folder named tests from the deployment. How can you achieve this?

hard

A. Add tests/ to a .vercelignore file in your project root

B. Rename the folder to _tests so Vercel ignores it automatically

C. Delete the tests folder before deploying

D. Use a CLI flag --ignore tests when running vercel

Solution

1. Step 1: Understand how to exclude files/folders in Vercel

   Vercel supports a .vercelignore file to specify files or folders to skip during deployment.

2. Step 2: Apply exclusion for the tests folder

   Adding tests/ line in .vercelignore tells Vercel to ignore that folder automatically.

3. Final Answer:

   Add tests/ to a .vercelignore file in your project root -> Option A

4. Quick Check:

   Use .vercelignore to exclude folders [OK]

Hint: Use .vercelignore file to exclude folders [OK]

Common Mistakes:

• Renaming folders expecting auto-ignore
• Deleting folders instead of ignoring
• Using non-existent CLI flags to ignore