Skip to content
Last updated on March 6, 2023
33 min read

Supported Frameworks on Vercel

Vercel supports a wide range of the most popular frontend frameworks, optimizing how your site builds and runs no matter what tool you use.

Vercel is the maintainer of Next.js, but our platform also has first-class support for a wide range of the most popular frontend frameworks. You can build your web applications with anything from Astro to SvelteKit, and in many cases deploy them without having to do any upfront configuration.

Deploying on Vercel with one of our supported frameworks gives you access to many of our features, such as:

The frameworks listed below can be deployed to Vercel with minimal configuration. See our docs on framework presets to learn more.

Using your preferred framework with Vercel will enable you to use our platform features, which are available to all deployments.

Connecting your preferred Git provider to a project on Vercel enables you to view your changes rapidly with automatic deployments, see changes in a live environment before merging with preview deployments, and gather feedback with comments.

Vercel automatically deploys new production builds whenever you make changes to your production branch, and preview builds whenever a new pull request is made on any branch. Commits on private Git repositories will only be deployed if the commit author also has access to the respective project on Vercel.

To summarize, connecting your Git provider to your Vercel project will give you:

Automatic preview deployments for every push to a pull request
Automatic production deployments for the most recent changes you make to the Production Branch

Access to our Instant Rollback feature, which rolls back your changes to a custom domain instantly

Preview Deployments allow you to preview changes to your app in a live deployment. They are available by default for all projects, and are generated when you commit changes to a Git branch with an open pull request, or you create a deployment using Vercel CLI.

You can receive feedback on your Preview Deployments from Vercel team members and people you share the Preview URL via the comments feature.

Comments allow you to start discussion threads, share screenshots, send notifications, and more.

To summarize, Preview Deployments on Vercel enable you to:

Share previews of pull request changes in a live environment
Give and receive feedback with our comments feature
Experience changes to your product without merging them to your deployment branch

Vercel's Edge Functions enable you to deliver dynamic, personalized content with our lightweight Edge Runtime.

Our Edge Runtime is more performant and cost-effective than Serverless Functions on average. Edge Functions are deployed globally on our Edge Network, and can automatically execute in the region nearest to the user who triggers them. They also have no cold starts, which means they don't need extra time to start up before executing your code.

Edge Functions are useful when you need to interact with data over the network as fast as possible, such as executing OAuth callbacks, responding to webhook requests, or interacting with an API that fails if a request is not completed within a short time limit.

Some frameworks, such as SvelteKit, support Edge Functions natively. We recommend using their method for implementing Edge Functions. If your framework does not have native support, you can still use Edge Functions in your project by creating an api directory at the root of your project.

The following example demonstrates an Edge Function defined in an api directory:

api/handler.ts

export const config = {
  runtime: 'edge',
};
 
export default (req: Request) => {
  return new Response(`Hello, from ${req.url} I'm now an Edge Function!`);
};

See our Function comparison table to understand whether Edge or Serverless is best for your use-case.

To summarize, Edge Functions on Vercel:

Enable you to respond to user requests with dynamic content at low latency, at scale
Offer cost savings by using fewer resources than Serverless Functions
Can execute in the region nearest to your users or nearest to data sources they depend on, based on your configuration
Have access to the geolocation and IP address of visitors, enabling location-based personalization

Serverless Functions enable developers to write functions in JavaScript and other languages to handle user authentication, form submissions, database queries, custom Slack commands, and more.

These Functions are co-located with your code and part of your Git workflow. As traffic increases, they automatically scale up and down to meet your needs, helping you avoid downtime and slowed performance.

Some frameworks, such as SvelteKit, support Serverless Functions natively. We recommend using their method for implementing Serverless Functions. If your framework does not have native support, you can still use Serverless Functions in your project by creating an api directory at the root of your project.

The following example demonstrates a Serverless Function defined in an api directory:

api/handler.ts

import type { VercelRequest, VercelResponse } from '@vercel/node';
 
export default function handler(
  request: VercelRequest,
  response: VercelResponse,
) {
  response.status(200).json({
    body: request.body,
    query: request.query,
    cookies: request.cookies,
  });
}

See our Function comparison table to understand whether Edge or Serverless is best for your use-case.

To summarize, Serverless Functions on Vercel:

Scale up and down to match user demand without reducing your app's performance or crashing

Support standard Web APIs, such as URLPattern, Response, and more

Have official support for runtimes for Node.js, Go, Python, and Ruby, and community support for many more, including Deno, Bash, PHP, and Rust

Edge Middleware is code that executes before a request is processed on a site. Based on the request, you can modify the response. Because it runs before the cache, using Middleware is an effective way of providing personalization to statically generated content. Depending on the incoming request, you can execute custom logic, rewrite, redirect, add headers and more, before returning a response.

Edge Middleware allows you to deliver content to your site's visitors with speed and personalization. They are deployed globally on Vercel's Edge Network and enable you to move server-side logic to the Edge, close to your visitor's origin.

Many frameworks have no native concept equivalent to Middleware. If your preferred framework uses client-side routing, such as Create React App or SvelteKit, we recommend against using Vercel's Middleware, as it will not run before every request.

If your preferred framework does not support route-specific middleware, but can use server-side routing (such as Astro), we recommend using Edge Middleware only if no framework-native solution exists. Check your preferred framework's docs to be sure.

To use Edge Middleware, create a middleware file at the root directory of your project as shown in the example below:

middeware.ts

export const config = {
  // Only run the middleware on the admin route
  matcher: '/admin',
};
 
export default function middleware(request: Request): Response {
  const url = new URL(request.url);
 
  if (url.pathname === '/admin') {
    url.pathname = '/redirected';
  }
  return Response.redirect(url);
}

To summarize, Edge Middleware on Vercel:

Executes before a request is processed on a site, allowing you to modify responses to user requests

Runs on all requests, but can be scoped to specific paths via a matcher config.

Uses our lightweight Edge Runtime to keep costs low and responses fast

On Vercel, static files are replicated and deployed to every region in our global Edge Network after the first request. This ensures that static files are served from the closest location to the visitor, improving performance and reducing latency.

Static files are cached for up to 31 days. If a file is unchanged, it can persist across deployments, as their hash caches static files. However, the cache is effectively invalidated when you redeploy, so we always serve the latest version.

To summarize, using Static Files on Vercel:

Automatically optimizes and caches assets for the best performance
Makes files easily accessible through the `public` folder
Supports zero-downtime rollouts

Vercel's Analytics features enable you to visualize and monitor your application's performance over time. The Analytics tab in your project's dashboard offers detailed insights into your website's visitors, with metrics like top pages, top referrers, and user demographics.

To use Analytics, navigate to the Analytics tab of your project dashboard on Vercel and select Enable in the modal that appears.

To track visitors and page views, we recommend first installing our @vercel/analytics package.

See our quickstart docs to get started with your preferred framework.

To summarize, using Analytics on Vercel:

Enables you to track traffic and see your top-performing pages
Offers you detailed breakdowns of visitor demographics, including their OS, browser, geolocation, and more

You can see data about your project's Core Web Vitals performance in your dashboard on Vercel. Doing so will allow you to track your web application's loading speed, responsiveness, and visual stability so you can improve the overall user experience.

On Vercel, you can track your app's Core Web Vitals in your project's dashboard by enabling Analytics.

To summarize, using Web Vitals on Vercel:

Enables you to track traffic performance metrics, such as First Contentful Paint, or First Input Delay

Enables you to view performance analytics by page name and URL for more granular analysis

Shows you a score for your app's performance on each recorded metric, which you can use to track improvements or regressions

An Edge Config is a key-value data store associated with your Vercel account. It enables you to read data at the edge without querying an external database. You can use it to check feature flags, initiate redirects, or block malicious IPs at the speed of the Edge, without hitting upstream servers or negatively impacting your site's performance.

With Vercel's optimizations, you can read Edge Config data at negligible latency. Most of your reads will complete within 15ms at P99 latency, or as low as 0ms in some scenarios.

Edge Configs are great for data that is accessed frequently and updated infrequently.

You can use them with deployments of any framework via our Edge Config SDK.

To summarize, using Edge Config on Vercel enables you to:

Experiment with A/B testing without impacting performance
Create critical redirects, which can be changed without needing to redeploy your site
Block malicious IPs and User Agents without invoking upstream servers

Vercel has partnered with popular service providers, such as MongoDB and Sanity, to create integrations that make using those services with your preferred framework easier. There are many integrations across multiple categories, such as Commerce, Databases, and Logging.

To summarize, Integrations on Vercel:

Simplify the process of connecting your preferred services to a Vercel project
Help you achieve the optimal configuration for a Vercel project using your preferred service
Configure service-specific environment variables for you

If you'd like to forward a URL path to a different one, apply headers to it, rewrite it, or change its visual appearance, you can do so by configuring routing rules.

Some frameworks, such as Astro and SvelteKit, have native solutions to this problem. If they don't, you can still configure routing rules on Vercel via a vercel.json file.

To do so, create a file named vercel.json in the root directory of your project. The following example demonstrates a vercel.json file that handles redirects, rewrites, and header modifications:

vercel.json

{
  "redirects": [
    {
      "source": "/me",
      "destination": "/profile.html"
    },
    {
      "source": "/view-source",
      "destination": "https://github.com/vercel/vercel"
    }
  ],
  "rewrites": [
    {
      "source": "/about",
      "destination": "/about-our-company.html"
    },
    {
      "source": "/resize/:width/:height",
      "destination": "/api/sharp"
    }
  ],
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "X-Content-Type-Options",
          "value": "nosniff"
        },
        {
          "key": "X-Frame-Options",
          "value": "DENY"
        },
        {
          "key": "X-XSS-Protection",
          "value": "1; mode=block"
        }
      ]
    }
  ]
}

To summarize, routing with vercel.json on Vercel enables you to:

Redirect users at the edge with minimal code
Modify your responses based on request headers
Attach headers to your responses

Vercel provides all deployments with a *.vercel.app URL, which enables you to share Deployments with your Team for collaboration. However, to provide greater personalization and flexibility to your project, you can instead add a custom domain.

To summarize, custom domains with Vercel enable you to:

Personalize your project's URL
Set up subdomains, apex domains, and wildcard domains
Have custom domains with up to 50 projects on a free Hobby-tier account

Vercel command-line interface (CLI) enables you to interact with the Vercel platform using a terminal, or through an automated system. With Vercel CLI, you can manage your projects by triggering deployments, adding domains, editing your environment variables, and more.

You can also interact with other platform features, such as your deployment logs, teams, and domain certificates. Vercel CLI enables you to use many features of the dashboard from the comfort of your terminal.

To summarize, using Vercel CLI enables you to:

Link, deploy, and roll back deployments of your projects
Manage and switch between your Vercel team scopes
Manage your environment variables, and replicate your deployment environment locally

Vercel's observability features help you monitor, analyze, and manage your projects. From your project's dashboard on Vercel, you can track website usage and performance, record team members' activities, and visualize real-time data from logs.

Activity Logs, which you can see in the Activity tab of your project dashboard, are available on all account plans.

The following observability products are available for Enterprise teams:

  • Monitoring: A query editor that allows you to visualize, explore, and monitor your usage and traffic
  • Runtime Logs: An interface that allows you to search and filter logs from static requests and Serverless or Edge Function invocations
  • Audit Logs: An interface that enables your team owners to track and analyze their team members' activity

For Pro (and Enterprise) accounts:

To summarize, Vercel's observability features enable you to:

Visualize website usage data, performance metrics, and logs
Search and filter logs for static, Serverless, and Edge Function requests
Use queries to see in-depth information about your website's usage and traffic
Send your metrics and data to other observability services via our integrations
Track and analyze team members' activity

Vercel provides Enterprise features for collaborating on and deploying applications with your preferred framework, including:

Dedicated Customer Success Engineers
Code Audits & Professional Services
HTTPS/SSL by default

Enhanced Security with Developer, Viewer, and Billing Roles

Integrations with your favorite tools

Contact us to learn more about how Vercel can help your team.

When creating a new project, Vercel will auto-detect your framework and configure builds and deployments. See our docs on getting started to deploy your favorite framework on Vercel. If you don't have a project to deploy, you can use one of our templates.

The following is a list of popular frameworks for which we currently provide documentation. This list will continue to grow over time.

Learn more about deploying your preferred framework on Vercel with the following resources: