deploy Next.js on Vercel

simple step-by-step guide to using Next.js with Vercel to deploy your website. This is the easiest way to host a Next.js app. 🚀

Install Next.js and create, run a new project

First create a new Next.js project.

npx create-next-app@latest my-app

if your creation faild like

C:\Users\admin\Desktop\blog-project-test>npx create-next-app@latest my-app
√ Would you like to use the recommended Next.js defaults? » Yes, use recommended defaults
Creating a new Next.js app in C:\Users\admin\Desktop\blog-project-test\my-app.

Using npm.

Initializing project with template: app-tw


Installing dependencies:
- next
- react
- react-dom

Installing devDependencies:
- @tailwindcss/postcss
- @types/node
- @types/react
- @types/react-dom
- eslint
- eslint-config-next
- tailwindcss
- typescript

npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: my-app@0.1.0
npm error Found: react-dom@undefined
npm error node_modules/react-dom
npm error   react-dom@"19.2.3" from the root project
npm error
npm error Could not resolve dependency:
npm error peer react-dom@"^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0" from next@16.1.6
npm error node_modules/next
npm error   next@"16.1.6" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error C:\Users\admin\AppData\Local\npm-cache\_logs\2026-03-06T22_57_53_689Z-eresolve-report.txt
npm error A complete log of this run can be found in: C:\Users\admin\AppData\Local\npm-cache\_logs\2026-03-06T22_57_53_689Z-debug-0.log

Aborting installation.
  npm install has failed.

then run

npm install -g pnpm

Go into the project folder:

cd my-app

then run

pnpm install

it will show you something like

C:\Users\admin\Desktop\blog-project-test\my-app>pnpm install
 WARN  Tarball download average speed 22 KiB/s (size 26 KiB) is below 50 KiB/s: https://registry.npmjs.org/globals/-/globals-16.4.0.tgz (GET).6: 1.76 MB/30.88 MB
 WARN  Tarball download average speed 40 KiB/s (size 152 KiB) is below 50 KiB/s: https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.6.tgz (GET)56 MB/30.88 MB
Downloading @img/sharp-win32-x64@0.34.5: 8.69 MB/8.69 MB, done
 WARN  GET http://registry.npmjs.org/electron-to-chromium error (ECONNRESET). Will retry in 10 seconds. 2 retries left.
 WARN  Tarball download average speed 5 KiB/s (size 7 KiB) is below 50 KiB/s: https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz (GET) 24.61 MB/30.88 MB
Downloading next@16.1.6: 30.88 MB/30.88 MB, done
 WARN  GET http://registry.npmjs.org/electron-to-chromium error (ECONNRESET). Will retry in 1 minute. 1 retries left.
Downloading @next/swc-win32-x64-msvc@16.1.6: 41.61 MB/41.61 MB, done
Packages: +350
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 424, reused 0, downloaded 355, added 350, done

dependencies:
+ next 16.1.6
+ react 19.2.3 (19.2.4 is available)
+ react-dom 19.2.3 (19.2.4 is available)

devDependencies:
+ @tailwindcss/postcss 4.2.1
+ @types/node 20.19.37 (25.3.5 is available)
+ @types/react 19.2.14
+ @types/react-dom 19.2.3
+ eslint 9.39.4 (10.0.3 is available)
+ eslint-config-next 16.1.6
+ tailwindcss 4.2.1
+ typescript 5.9.3

╭ Warning ───────────────────────────────────────────────────────────────────────────────────╮
│                                                                                            │
│   Ignored build scripts: sharp@0.34.5, unrs-resolver@1.11.1.                               │
│   Run "pnpm approve-builds" to pick which dependencies should be allowed to run scripts.   │
│                                                                                            │
╰────────────────────────────────────────────────────────────────────────────────────────────╯
Done in 2m 1.1s using pnpm v10.30.3

Start the development server:

npm run dev

it will run correctly now

C:\Users\admin\Desktop\blog-project-test\my-app>npm run dev

> my-app@0.1.0 dev
> next dev

▲ Next.js 16.1.6 (Turbopack)
- Local:         http://localhost:3000
- Network:       http://192.168.11.100:3000

✓ Starting...
✓ Ready in 1222ms

Open in browser:

Now your Next.js app is running locally.

Create a Vercel Account

Go to Vercel and sign up.

You can sign up using:

• GitHub
• GitLab
• Bitbucket

Most developers use GitHub.

Push Your Project to GitHub

Initialize git:

git init
git add .
git commit -m "first commit"

Create a repository on GitHub then connect it:

git remote add origin https://github.com/username/my-app.git
git push -u origin main

Deploy with Vercel

1. Go to Vercel dashboard
2. Click Add New Project
3. Import your GitHub repository
4. Select the project
5. Click Deploy

That's it 🎉

Vercel automatically detects it’s a Next.js app and configures everything.

Your Site is Live

After deployment you get a URL like:

https://my-app.vercel.app

Every time you push code to GitHub, Vercel automatically redeploys your site.

Environment Variables (Important)

If your app uses API keys:

1. Open project settings in Vercel
2. Go to Environment Variables
3. Add variables like:

DATABASE_URL=xxxx
API_KEY=xxxx

Custom Domain (Optional)

You can add your own domain like:

mywebsite.com

In Vercel:

Project → Settings → Domains

🔥 Pro Tips

With Next.js on Vercel you get automatically:

• ⚡ Edge functions
• ⚡ Image optimization
• ⚡ Serverless APIs
• ⚡ Automatic HTTPS
• ⚡ Global CDN