Deploy Next.js application on Vercel

1. Deployment Preparation

Before starting the deployment, make sure your project is free from errors and dependencies are configured correctly.

1.1 Fix Errors

Run the following command to check and fix errors in your code:

pnpm run lint

If you encounter issues like unused variables, you can use ESLint rules to fix them, for example:

// eslint-disable-next-line @typescript-eslint/no-unused-vars

1.2 Prisma Configuration

Ensure your Prisma configuration is set up to avoid issues with Vercel’s dependency caching, which could cause an outdated Prisma Client due to the auto-generation not being triggered. Add the following to your package.json:

// package.json
"scripts": {
  "postinstall": "prisma generate",
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
}

The postinstall script ensures that Prisma Client is generated correctly after every deployment.

2. Vercel Deployment

1. Import GitHub Project
2. Configure Environment Variables
3. Deploy the Project

3. Add Subdomain in Domain Hosting Provider

1. Log in to your domain hosting provider’s website.
2. In the DNS configuration, add or edit the resource record by selecting the CNAME type, and set the target value to: Add/Edit a Resource Record >> netflix/CNAME/cname.vercel-dns.com