Deploy with vercel
Tags: nextjs, vercel, node
Published: 2024-04-13 01:15:30



# **Efficient Deployment of Next.js Applications Using Vercel**

Deploying your Next.js application doesn't have to be a hassle. Thanks to Vercel, you can streamline the process without the constant need to switch directories, assuming you execute the script from the root where your `package.json` and other configuration files reside. This tutorial will guide you through setting up a deployment script using the Vercel CLI, perfectly suited for projects under Git version control.

### **Step 1: Setup Vercel CLI**

First off, if you haven't already installed the Vercel CLI, you'll need to do this to manage your deployments from the command line. Open your terminal and run:

```bash
npm install -g vercel
```


### **Step 2: Login to Vercel via CLI**

Before deploying using the CLI, ensure you are logged into your Vercel account:

```bash
vercel login
```

This command prompts you to enter the email associated with your Vercel account. You will then receive an email with a verification link to proceed.

### **Step 3: Create a Deployment Script**

Navigate to the root directory of your project and open your `package.json`. Add a deployment script in the scripts section:

```json
"scripts": {
  "build": "next build",
  "start": "next start",
  "deploy": "vercel --prod"
}
```

Each script serves a distinct purpose:
- `"build"`: Compiles the Next.js application.
- `"start"`: Runs the Next.js application in production mode.
- `"deploy"`: Deploys the current directory to Vercel as a production deployment.

### **Step 4: Deploy Using NPM/Yarn**

To deploy your application, use the following command in your terminal:

```bash
npm run deploy
```

Alternatively, if you are using Yarn:

```bash
yarn deploy
```

### **Step 5: Automate Deployments with Git (Optional)**

For those preferring continuous deployment, you can link your GitHub, GitLab, or Bitbucket repository to Vercel which will then automatically deploy your project when you push changes:

```bash
git init
git add .
git commit -m "Prepare for deployment"
git remote add origin <your-repository-url>
git push -u origin master
```

Next, connect your repository to Vercel:
- Navigate to the [Vercel Dashboard](https://vercel.com/dashboard).
- Click on "New Project".
- Select your Git provider and locate your repository.
- Configure the project settings and initiate the deployment.

### **Step 6: Continuous Deployments**

Once set up, any push to your branch (usually the main/master branch) triggers a deployment automatically. Vercel manages these deployments and provides URLs to access the deployed application.

### **Additional Notes**

- **Environment Variables**: Set these through the Vercel dashboard under your project settings if your application requires them.
- **Custom Domains**: Custom domains can be configured via the Vercel dashboard once your project is fully set up.

By following these steps, you can manage and automate the deployment of your Next.js application on Vercel effortlessly. This method not only simplifies development but also ensures that your production deployments are consistent and easily traceable.

---

This format lays out a clear, informative, and step-by-step guide that should help readers effectively deploy their Next.js applications using Vercel. The inclusion of console commands and additional tips enhances the practical utility of the post for developers at all levels.