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

Need a 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

Need a 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

Need a 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

Need a 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.