Deploy your Astro site to Vercel

Vercel hosts websites for free and updates them automatically every time you push to Git. Any Astro site works on Vercel, this guide walks you through it step by step.

Build settings

Vercel fills these in automatically when you import an Astro project, so you usually don't have to touch them:

Build command

Compiles your site

$npm run build

Output directory

Where the site lands

dist

Two ways to deploy

Both get your site live. If you're new, start with the website, it's all clicks, no terminal.

From the website

Recommended for beginners

Connect a repo from GitHub, GitLab, or BitBucket. Vercel recognizes Astro and fills in the settings for you.

1Click Add New… → Project in your Vercel dashboard.
2Import the Git repository you want to deploy.
3Vercel detects Astro and fills in the build settings.
4Click Deploy, that's it.

After this, every git push rebuilds your site automatically.

From the terminal

If you prefer the command line

Run these three commands. vercel detects your Astro settings and walks you through the rest.

terminal

npm install --global vercel
vercel login
vercel

When Vercel asks "Want to override the settings?", choose No, it already detected Astro.

Set the build in a file

Want extra settings saved in your repo instead of the dashboard, like custom response headers? Add a vercel.json file to the root of your project. Vercel reads it on every deploy.

vercel.json

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        { "key": "X-Content-Type-Options", "value": "nosniff" }
      ]
    }
  ]
}

Need a server? Add the adapter

By default your Astro site is fully static, perfect for most projects, and nothing extra to set up. Only add the Vercel adapter if you need server features like API routes or pages that render on each request. One command installs and configures it:

terminal

npx astro add vercel

Once it's installed, your server routes and API endpoints deploy automatically as Vercel Functions, no extra setup. Make a landing page render on the server by adding export const prerender = false to it.

Build failing? Check your Node version

Astro needs Node 22.12.0 or newer. If your build fails, set the version in Project Settings → General → Node.js Version on Vercel, or pin it with an engines field in your package.json (for example "node": "22.x").

Learn more

The official docs go deeper if you need them.

Astro on Vercel

The official Astro deployment guide for Vercel.

@astrojs/vercel adapter

Full adapter reference, options, and edge config.

Server-side rendering

Learn how on-demand rendering works in Astro.

Vercel docs

Functions, redirects, environment variables, and more.