Skip to content
Search...
⌘K
Last updated on February 17, 2023
12 min read

Serverless Functions Quickstart

In this quickstart guide, you'll learn how to get started with Serverless Functions on Vercel using Vercel CLI. The guide will cover:

  • Creating a Serverless Function
  • Using environment variables in a Serverless Function
  • Using path segments in a Serverless Function
  • Deploying a Serverless Function with Vercel CLI

Prerequisites

You should have the latest version of Vercel CLI installed. To check your version, use vercel --version. To install or update Vercel CLI, use:

pnpm i -g vercel@latest

Create a Serverless Function

Select your preferred framework below to get started. The implementation of the Serverless Function will differ depending on the framework you choose.

Create a new Next.js project

Use create-next-app to create a new Next.js project:

terminal

npx create-next-app@latest --typescript

Follow the prompts to set your project up. When you open the project, notice that it comes with a single API Route. This is where you will be creating your Serverless Function.

Add code to your function

The following function will echo the body, path query, and cookies, passed with the request object, as a JSON object using helper methods provided through the Request and Response objects.

pages/api/handler.ts

import { NextApiRequest, NextApiResponse } from 'next';
 
export default function handler(
  request: NextApiRequest,
  response: NextApiResponse,
) {
  response.status(200).json({
    body: request.body,
    query: request.query,
    cookies: request.cookies,
  });
}

Use Vercel CLI to start a local development server:

terminal

vercel dev

Navigate to http://localhost:3000/api/handler to see the response that echos the request body, query, and cookies.

Using environment variables

You can use Environment Variables inside your Serverless Functions, both locally with vercel dev as well as deployed to preview and production environments.

Create an .env file at your project root and add the following:

.env

MY_SECRET=123456789

You can then add this variable to your project via the CLI:

terminal

vercel env add my_secret

Follow the prompts to decide which environments you want to add the variable to. You can choose from the following:

  • Development
  • Preview
  • Production

Environment variables can also be added to your project via the dashboard by navigating to your project and clicking on the Settings - Environment Variables tab.

Note that .env.local is not currently supported with vercel dev, so ensure you are using a .env file. Environment variables should not be committed with your code. Make sure the .env file is added to your .gitignore file.

To use the environment variable in your Serverless Function, you can access it through the process.env object. Adding to the previous example, you can add the following:

pages/api/handler.ts

import { NextApiRequest, NextApiResponse } from 'next';
 
export default function handler(
  request: NextApiRequest,
  response: NextApiResponse,
) {
  response.status(200).json({
    body: request.body,
    query: request.query,
    cookies: request.cookies,
    env: process.env.MY_SECRET,
  });
}

Use Vercel CLI to start a local development server:

terminal

vercel dev

Navigate to http://localhost:3000/api/handler to see the response that echos the request body, query, cookies, and the environment variable.

Using path segments

You can use path segments through file names instead of a complex routes file when using Serverless Functions on Vercel.

By using square brackets ([name].ts), you can retrieve dynamic values from the page segment of the URL inside your Serverless Function.

Create a new file inside pages/api called [name].ts and add the following code:

pages/api/[name].ts

import { NextApiRequest, NextApiResponse } from 'next';
 
export default function handler(
  request: NextApiRequest,
  response: NextApiResponse,
) {
  const { name } = request.query;
  return response.end(`Hello ${name}!`);
}

Use Vercel CLI to start a local development server:

terminal

vercel dev

Navigate to http://localhost:3000/api/ and append a name to the end of the URL to see the response that echos the name you provided.

For example, appending api/Mary would return Hello Mary!.

Deploy your Serverless Function

You can deploy your Serverless Function to Vercel's global Edge Network by running the following command from your terminal:

terminal

vercel deploy

The Serverless Function can then be accessed by navigating to the URL provided in the terminal, or the projects Deployments tab of your dashboard.

The Functions tab allows you to view any logs generated by your Serverless Function. See the Function logs documentation for more information.

Additional Resources