@astrojs/vercel
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 Vercel
Section titled Why Astro VercelIf 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.
Installation
Section titled InstallationAdd 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.mjs
project configuration file.
Targets
Section titled TargetsYou 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.
You can change where to target by changing the import:
Usage
Section titled Usage📚 Read the full deployment guide here.
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:
Configuration
Section titled ConfigurationTo configure this adapter, pass an object to the vercel()
function call in astro.config.mjs
:
includeFiles
Section titled includeFilesType:
string[]
Available for: Edge, Serverless
Use this property to force files to be bundled with your function. This is helpful when you notice missing files.
excludeFiles
Section titled excludeFilesType:
string[]
Available for: Serverless
Use this property to exclude any files from the bundling process that would otherwise be included.
Troubleshooting
Section titled TroubleshootingA 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 esbuild
.
For help, check out the #support
channel on Discord. Our friendly Support Squad members are here to help!
Contributing
Section titled ContributingThis package is maintained by Astro’s Core team. You’re welcome to submit an issue or PR!
Changelog
Section titled ChangelogSee CHANGELOG.md for a history of changes to this integration.