Vercel Functions Quickstart

Build your first Vercel Function in a few steps.

Table of Contents

Next.js (/app)

In this quickstart guide, you'll learn how to get started with Vercel Functions using your favorite frontend framework (or no framework) to:

Create a function
Choose a runtime to use for your function
Run your function locally using the Vercel CLI
Deploy your function to Vercel

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
yarn
npm
```
pnpm i -g vercel@latest
```

You can use an existing project or create a new one. If you don't have one, you can run the following terminal command to create a Next.js project:

terminal

npx create-next-app@latest --typescript

Create a Vercel Function

Select your preferred framework to get started from the switcher on the top-right of the page. The implementation of the function will differ depending on the framework you choose.

Create an API route
In the app directory:
Create /api/hello/route.ts
Then, add the following code, which will return the region the function was executed in:
Next.js (/app)
Next.js (/pages)
Other frameworks
app/api/hello/route.ts
```
export const dynamic = 'force-dynamic'; // static by default, unless reading the request
 
export function GET(request: Request) {
  return new Response(`Hello from ${process.env.VERCEL_REGION}`);
}
```
To learn more about how to write a function, see the Functions API Reference.
Choose a runtime (optional)
You can optionally choose a runtime for your Function. If you don't specify a runtime, Vercel will automatically use the Serverless Node.js runtime:
Next.js (/app)
Next.js (/pages)
Other frameworks
app/api/hello/route.ts
```
export const runtime = 'nodejs';
```
In the above code, you export a segment config option, allowing us to define the runtime. The runtime configuration can be nodejs or edge. See Choosing a Runtime for more information on the differences between the runtimes.
You can also choose other languages like Python or Go. Learn more about supported runtimes.
Test your code locally
Use next dev to start a local development server:
terminal
```
next dev
```
Navigate to the route you created (e.g. /api/hello) in your browser to see the following response:
Response
```
Hello from undefined
```
When you run your function locally, the VERCEL_REGION environment variable hadn't yet been defined. When you deploy your function to Vercel, the VERCEL_REGION environment variable will be defined and will contain the region the function was executed in.
Deploy to Vercel
If your project has already been deployed to Vercel, push your changes to your Git repository and Vercel will automatically deploy your function. If you haven't deployed your project to Vercel, either create a new project in the dashboard or using the vercel command with the Vercel CLI.
You can use the env command to pull the latest environment variables for your project so they can be used locally.
Once you've successfully deployed, view the deployment and navigate to the route you created (e.g. /api/hello) in your browser to see the following response:
Response
```
Hello from iad1
```
If you chose to set region to edge, you'll see the response from the region closest to you. This is because Edge Functions execute in the region closest to the user.

More resources

Functions API Reference: Learn more about creating a Vercel Function.
Streaming Functions: Learn how to fetch streamable data with Vercel Functions.
Choosing a Runtime: Learn more about the differences between the Node.js and Edge runtimes.
Configuring Functions: Learn about the different options for configuring a Vercel Function.

Last updated on July 16, 2024

Vercel Functions

Concepts

Was this helpful?