Deploying Next JS App on vercel

Author
April 06, 2022

In this tutorial iam gonna explain you how you can deploy you next js application to vercel

Step 1: Set your environment variable

Create environment variable files in root path of the project and define your environment variable for example

  • .env.local - File used to define environment variable for local development
  • .env.production - File used to define environment variable for production

Step 2: Create production build of your next js application

Create production build using following command

npm run build

Step 3: Push the code to your github or gitlab or bitbucket account

Push your code in a repo to either gitlab or github or bitbucket

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

Step 4: SignIn or signup to vercel through your github or gitlab or bitbucket account

You need to signup or signin through your github or gitlab or bitbucket account on which you have pushed the code

sign-in-signup

Step 5: Add project on vercel

  • In order to add project we need to connect our github or gitlab or bitbucket account and repo as shown below in the image

add-project

  • Once you click on add your github account you will be asked whether you want to share all the repo or specific repo

  • Once you select the repo it will ask you to import then click on the repo which you want to import

  • After import is done it will ask further detail like project name, environment variable, build command etc

  • Once you are done filling the detail you can click on deploy and it will automatically deploy