Skip to content

Migrate to Vercel

Migrate your websites and APIs to the Vercel Platform with zero configuration.

Vercel tries to automatically detect the frontend framework you’re using for your project and configure the project settings for you. If you’d like to override the settings or specify a different framework, take a look at our documentation on build settings.

To migrate your domains to Vercel, refer to the following documentation:

Serverful apps need to run consistently, watching for requests. Then, when requested, the app handles the request itself.

In serverful monolith style apps, routing is commonly handled by a single file. Let's look at an Express.js example to illustrate this:

app.get('/', function (req, res) {
  res.send('GET homepage.');
});'/teams', function (req, res) {
  res.send('POST teams data.');

app.get('/teams/data', function (req, res) {
  res.send('GET teams data.');

A common routes configuration for serverful Express.js.

With serverless, functionality is split into separate files, called Serverless Functions. Instead of a file or process growing monolithically, this gives us the ability to break down the app into independently scalable parts.

When a path is requested, the Serverless Function for that path is invoked. This avoids the whole app from having to wait and watch for requests, saving on time and resources.

The only requirement for Serverless Functions on Vercel, without advanced configuration, is that you place your files inside of an /api directory. By doing this, Vercel will be able to handle both the routing and building of these files – dramatically simplifying the process of developing an API.

When using the /api directory, routing is based on the filesystem, enabling you to keep track of endpoints by looking at the file tree. For example, the file /api/teams/example.js would be available at the endpoint /api/teams/example.

Note: When making calls to the /api directory, no file extensions are required.

For the above example, you would only need to place the /teams directory within the /api directory.

With the /api directory created and the structure added, the next step is to add the required files for the endpoints.

As an example the first file – index.js – would sit at the root of the /api directory. This is equivalent to app.get('/', and the contents of the file would be:

module.exports = (req, res) => {
  res.send('Hello world from the /api route!');

A Serverless Function in an example index.js file, within the /api directory.

The next file would be placed inside the /teams directory inside of the /api directory, also named index.js. This is equivalent to'/teams') and could be used to create a new team. The contents of the file would be:

module.exports = (req, res) => {
  const { name } = req.body;
    `This response would create a new team called ${name}, using a POST request.`,

A Serverless Function in an example index.js file, within the /api/teams directories.

The last route would also be placed in the /teams directory, however, it would be named data.js - this is equivalent to app.get('/teams/data'). The contents of the file would be:

module.exports = (req, res) => {
  res.send('This response would send information about teams.');

A Serverless Function in an example data.js file, within the /api/teams directories.

Note: The endpoint for an index.js file can be invoked through the parent folder's path. You can opt-out of this behavior by not using the index.js filename for API endpoints.

Using route parameters with your Serverless Functions is made with Vercel. Let's first take a look at another serverful Express.js example that uses a dynamic route.

app.get('/teams/:member', function (req, res) {
  res.send(`GET details about the ${req.query.member}.`);

A common routes configuration, that receives and uses a route parameter, for serverful Express.js.

The above route uses the route parameter member, with Express.js making it available as part of the req.query object.

To convert this route for use inside of the /api directory with Vercel, we will once again place it inside the /teams directory. However, this time we will name it [member].js - this is called a Path Segment.

Path Segments allow your endpoints to receive route parameters and, just like Express, they are made available on the req.query object with the key specified in the filename.

Taking this into account, we can convert the above Express route for Vercel with the following code:

// api/teams/[member].js
module.exports = (req, res) => {
  res.send(`This response will send details about the ${req.query.member}.`);

A Serverless Function in an example [member].js file, within the /api/teams directories.

Note: When using Serverless Functions in your project, or advanced functionality, you need to use vercel dev to replicate the Vercel Platform environment locally.

Written By
Written by mcsdevmcsdev
Written by timothytimothy
Written by skllcrnskllcrn