This adapter allows Astro to deploy your SSR site to Vercel.
Learn how to deploy your Astro site in our Vercel deployment guide.
Why Astro VercelSection titled Why Astro Vercel
If you’re using Astro as a static site builder — its behavior out of the box — you don’t need an adapter.
If you wish to use server-side rendering (SSR), Astro requires an adapter that matches your deployment runtime.
Vercel is a deployment platform that allows you to host your site by connecting directly to your GitHub repository. This adapter enhances the Astro build process to prepare your project for deployment through Vercel.
InstallationSection titled Installation
Add the Vercel adapter to enable SSR in your Astro project with the following
astro add command. This will install the adapter and make the appropriate changes to your
astro.config.mjs file in one step.
If you prefer to install the adapter manually instead, complete the following two steps:
Install the Vercel adapter to your project’s dependencies using your preferred package manager. If you’re using npm or aren’t sure, run this in the terminal:
Add two new lines to your
astro.config.mjsproject configuration file.
TargetsSection titled Targets
You can deploy to different targets:
edge: SSR inside an Edge function.
serverless: SSR inside a Node.js function.
static: generates a static website following Vercel’s output formats, redirects, etc.
Note: deploying to the Edge has its limitations. An edge function can’t be more than 1 MB in size and they don’t support native Node.js APIs, among others.
You can change where to target by changing the import:
UsageSection titled Usage
You can deploy by CLI (
vercel deploy) or by connecting your new repo in the Vercel Dashboard. Alternatively, you can create a production build locally:
ConfigurationSection titled Configuration
This adapter does not expose any configuration options.
TroubleshootingSection titled Troubleshooting
A few known complex packages (example: puppeteer) do not support bundling and therefore will not work properly with this adapter. By default, Vercel doesn’t include npm installed files & packages from your project’s
./node_modules folder. To address this, the
@astrojs/vercel adapter automatically bundles your final build output using
For help, check out the
#support channel on Discord. Our friendly Support Squad members are here to help!
ContributingSection titled Contributing
This package is maintained by Astro’s Core team. You’re welcome to submit an issue or PR!
ChangelogSection titled Changelog
See CHANGELOG.md for a history of changes to this integration.