To deploy Next.js to Vercel, connect your GitHub repository in Vercel, let the platform detect Next.js, add any required environment variables, and trigger the first build. In Next.js 15, new apps usually use the App Router, but older Pages Router apps deploy the same way. Vercel also supports preview deployments for each pull request and CLI-based deploys with vercel.
What deploying Next.js to Vercel means
Deploying Next.js to Vercel means sending your Next.js application code to Vercel so it can run next build, create a production deployment, and host the resulting app on Vercel’s infrastructure. In the standard flow documented in current search results, you push code to GitHub, import that repository into Vercel, and Vercel auto-detects that the project is a Next.js app.[245][253]
This setup works for both routing models commonly seen in 2024 and 2025 projects. In Next.js 15, the App Router is the default for new apps, which is why many deployment guides now assume app/ instead of pages/, but a Pages Router app still uses the same Vercel deployment process.[246]
A practical reason teams choose this route is that Vercel handles common Next.js features without extra hosting configuration. According to current search-source guidance, server-side rendering, static generation, route handlers, and server actions can run on Vercel without manually wiring separate infrastructure first.[249]
How to deploy Next.js to Vercel step by step
The main deployment workflow is a Git-based import from GitHub into Vercel, with environment variables added in Vercel before or during deployment. If you prefer not to use Git integration, Vercel CLI provides a second path with the vercel command.[245][248][250]
Create or open your Next.js app. For example, a Next.js 15 app may use the App Router by default, but the deployment steps also apply to older Pages Router projects.[246]
Push the project to GitHub. Vercel’s standard flow starts from a Git repository that Vercel can import and build automatically.[245]
Sign in to Vercel and choose to import the GitHub repository. Vercel usually detects Next.js without manual framework selection.[245]
Review the build settings. In most Next.js projects, Vercel uses
next buildand handles output automatically, so you usually do not need to configure an output folder yourself.[253]Add environment variables in Vercel Project Settings instead of committing secrets to the repository. Vercel separates Development, Preview, and Production values, which matters when API keys differ by environment.[250]
If you use a monorepo, set the correct Root Directory so Vercel builds the intended Next.js app instead of the repository root.[252]
Start the first deployment and wait for the build logs. If the deployment succeeds, Vercel provides a production URL and future pushes can trigger new builds automatically.[245]
Open a pull request to test preview deployments. Vercel can generate a preview deployment for every PR, which helps review changes before merging to
main.[247]
# Optional CLI workflow
# Install the Vercel CLI, then deploy from your project folder
npm install -g vercel
vercel
# For production deployment
vercel --prodThe CLI path is useful when you want a quick preview outside the Git-based workflow or when a repository connection is not available. Current guidance in search results specifically calls out the vercel command as a supported local deployment option.[248]
How the main deployment options compare
The two practical deployment options are Git-based deployment and CLI deployment, with monorepo configuration acting as a variation of the Git-based setup when one repository contains multiple apps. The right choice depends on whether you want automatic builds on push, pull request previews, or manual control from a local machine.[247][248][252]
| Option | Best for | Setup details | Limitations |
|---|---|---|---|
| GitHub → Vercel import | Standard production workflow | Import repo in Vercel, auto-detect Next.js, build with next build automatically.[245][253] | Requires a connected Git provider. |
| Vercel preview deployments | Reviewing pull requests | Vercel creates a deployment for each PR so teammates can test changes before merge.[247] | Depends on a Git-based workflow. |
Vercel CLI (vercel) | Manual deploys or quick previews | Run vercel locally, then vercel --prod for production.[248] | Less automatic than push-to-deploy. |
| Monorepo with Root Directory | Repos containing multiple apps | Point Vercel to the correct Next.js app folder in project settings.[252] | Misconfigured root paths can build the wrong directory. |
Common Next.js to Vercel deployment errors
The most common deployment errors involve missing environment variables, Node.js version mismatches, and incorrect project settings such as the wrong root directory. Search-source guidance explicitly notes that unsupported Node.js versions or mismatched build settings can cause failed deploys, and that monorepos often need a custom Root Directory.[250][251][252]
Missing environment variables: If your app uses
process.env, add those values in Vercel Project Settings for Development, Preview, or Production as needed.[250]Wrong Node.js version: Check the Node version expected by your project and compare it with Vercel project settings. Search guidance notes that unsupported or mismatched Node versions are a common reason builds fail.[251]
Wrong monorepo root directory: In a repo with
apps/webor a similar structure, set the Root Directory to that app so Vercel runs the build in the right folder.[252]Unexpected build customization: Most Next.js deployments on Vercel already use
next buildand auto-handle output, so manual output-folder settings are often unnecessary and can complicate setup.[253]Hardcoded secrets in code or
.envconfusion: Store production secrets in Vercel instead of relying on a local.envfile that never reaches Vercel’s hosted environment.[250]
If a deployment fails, start with the Vercel build logs and verify the highest-probability issues first: environment variables, Node.js version, and root directory. Those three checks cover the specific failure patterns highlighted in current search guidance more directly than changing unrelated build output settings.[250][251][252]
Tips to make deployment smoother
A smoother deployment usually comes from reducing configuration changes and letting Vercel use its default Next.js behavior first. Current guidance says Vercel auto-detects Next.js, uses next build, and handles output automatically in most projects, so unnecessary manual settings often create more room for error.[245][253]
Use the default GitHub import flow first, because it is the simplest documented path for most projects.[245]
Add environment variables before testing production behavior, especially when your app depends on external APIs or database credentials.[250]
Use preview deployments on pull requests so you can validate changes without merging directly to
main.[247]Keep monorepo settings explicit by confirming the Root Directory after import if your repository contains more than one app.[252]
Use the CLI only when you need a manual deploy path or a non-Git preview, not because the main workflow is missing a step.[248]
Treat App Router and Pages Router as deployment variants of the same hosting process; Next.js 15 changed the default routing model for new apps, not the core Vercel import flow.[246]
FAQ
Do I need GitHub to deploy Next.js to Vercel?
No. The standard workflow uses GitHub repository import, but Vercel also supports CLI deployment with the vercel command for local or manual deploys.[245][248]
Does Next.js 15 deploy differently on Vercel?
Not in the main setup flow. Next.js 15 defaults new apps to the App Router, but Vercel deployment still generally works by importing the repo, detecting Next.js, and building it.[245][246]
Where should I put environment variables for Vercel?
Put them in Vercel Project Settings. Current guidance says Development, Preview, and Production values should be managed there rather than hardcoded in the repository.[250]
How do preview deployments work on Vercel?
Vercel can create a preview deployment for every pull request in a Git-based workflow, giving you a separate URL to review changes before merging.[247]
How do I deploy a Next.js app from a monorepo?
Set the correct Root Directory in Vercel so the platform builds the specific Next.js app folder, such as apps/web, instead of the repository root.[252]