Skip to content
Cosmic Themes

Vercel

To deploy on Vercel, we need to make some package changes and adjust the Astro config file.

  • Install the @astrojs/vercel adapter and uninstall the @astrojs/netlify adapter
  • Adjust the astro.config.mjs file for Vercel deployment
  • You can also delete the netlify.toml file

Project Adjustments

Packages

  • Install the @astrojs/vercel adapter with npm install @astrojs/vercel
  • Uninstall the @astrojs/netlify adapter with npm uninstall @astrojs/netlify

Gitignore

It is recommended to add the local Vercel folder to your .gitignore file as these files are not necessary for your repository:

# build output
dist/
# generated types
.astro/


# dependencies
node_modules/


# logs
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*


# environment variables
.env
.env.production


# macOS-specific files
.DS_Store


# Local Netlify folder
.netlify


# Local Vercel folder
.vercel

Config File

Make the following adjustments to the astro.config.mjs file for Vercel deployment:

import netlify from "@astrojs/netlify";
import vercel from "@astrojs/vercel/serverless";


// https://astro.build/config
export default defineConfig({
  site: "https://yoursite.com",
  output: "hybrid",
  adapter: netlify({
    imageCDN: false,
  }),
  adapter: vercel({
    imageService: false,
  }),
  // other config options
});

Test Build

Before deploying, it is recommended to test the build locally with npm run build to ensure everything is working as expected.

Deploying

  1. Push your code to GitHub
  2. Create a Vercel account if you don’t already have one
  3. Follow the official Vercel documentation to deploy your site

Additional information