Tutorial
4 min read

Vercel Functions Quickstart

Build your first Vercel Function in a few steps.
Table of Contents

In this quickstart guide, you'll learn how to get started with Vercel Functions using your favorite frontend 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
  1. 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
  2. You should have an existing project. 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

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.

  1. 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.

  2. 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.

  3. 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.

  4. 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.

Last updated on May 25, 2024