Getting started with Vercel Functions
In this guide, you'll learn how to get started with Vercel Functions using your favorite frontend framework (or no framework).
For example, you can use Next.js Route Handlers, a framework with routing support such as Hono, or define a single fetch handler that receives requests for all HTTP methods and routes them by URL pathname.
For projects without a framework, Vercel creates a separate function for each supported source file in the root api/ directory and doesn't automatically combine these files into one function. Avoid creating a separate function for each API endpoint. Keep related routes in a shared function so Fluid compute can reuse instances across routes and Vercel builds fewer functions.
With a standalone fetch handler, you can keep routing logic in one handler without separate GET, POST, or other HTTP method exports. Configure rewrites to send your API paths to the same function.
Help me create a Vercel Function in this project. First, inspect the project to identify its framework and existing routing. For a Next.js App Router project, use Next.js Route Handlers (https://nextjs.org/docs/app/getting-started/route-handlers) in app/api/hello/route.ts (or route.js) with named HTTP method exports such as GET and POST. For other frameworks, use their existing routing conventions. For a project without a framework, use a framework with routing support such as Hono, or define a single fetch handler in the default export using the standard Request and Response APIs. If using a standalone fetch handler, keep related routes in a shared function so Fluid compute can reuse instances across routes and Vercel builds fewer functions. The fetch handler receives requests for all HTTP methods, so route by URL pathname and check request.method where needed instead of using separate GET or POST exports. Configure rewrites to send the API paths to that function. Keep its route modules and shared utilities outside the root api/ directory because Vercel deploys each supported source file there as a separate function and does not combine them automatically. Add a GET /api/hello route that fetches data from https://api.vercel.app/products and returns it as JSON. Make sure the Vercel CLI is installed (`npm i -g vercel`), run `vercel link` to connect the project, test locally with `vercel dev`, then deploy with `vercel --prod`.
npx plugins add vercel/vercel-plugin- 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:
pnpm create next-app@latest yarn create next-app@latest npx create-next-app@latest bunx create-next-app@latest Open the code block in v0 for a walk through on creating a Vercel Function with the below code, or copy the code into your project. The function fetches data from the Vercel API and returns it as a JSON response.
export async function GET(request: Request) {
const response = await fetch('https://api.vercel.app/products');
const products = await response.json();
return Response.json(products);
}While using fetch is the recommended way to create a Vercel Function, you can still use HTTP methods like GET and POST.
Now that you have set up a Vercel Function, you can explore the following topics to learn more:
- Explore the functions API reference: Learn more about creating a Vercel Function.
- Learn about 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.
Was this helpful?
