Supported Frameworks on Vercel

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:

• Preview deployments with comments
• Git provider integrations
• Serverless Functions
• Edge Functions
• Edge Configs
• In-depth Analytics and Web Vitals monitoring tools

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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

{
  "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:

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:

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:

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:

• Log Drains: Export your log data for better debugging and analyzing, either from the dashboard, or using one of our integrations
• OpenTelemetry (OTEL) collector: Send OTEL traces from your Serverless Functions to application performance monitoring (APM) vendors

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

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

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: