Back to articles

Mastering Serverless Functions with Next.js and Vercel

Majd Muhtaseb04/28/20257 minutes

Introduction

Serverless functions are a powerful way to add backend functionality to your Next.js applications without managing servers. This guide walks you through creating and deploying them using Next.js API routes and Vercel.

What are Serverless Functions?

Serverless functions are single-purpose, event-driven functions that are executed on demand. Vercel handles the infrastructure, scaling, and management, allowing you to focus on your code.

Creating a Next.js API Route

Next.js makes creating serverless functions incredibly easy through API routes. These routes are located in the pages/api directory.

Let's create a simple API route that returns a JSON response.

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ name: 'Hello, world!' })
}

This code defines a function that handles incoming requests to the /api/hello endpoint. It sets the status code to 200 (OK) and returns a JSON object.

Handling Different HTTP Methods

You can handle different HTTP methods (GET, POST, PUT, DELETE, etc.) within your API route.

// pages/api/greet.js
export default function handler(req, res) {
  if (req.method === 'POST') {
    const { name } = req.body;
    res.status(200).json({ message: `Hello, ${name}!` });
  } else {
    res.status(405).json({ message: 'Method Not Allowed' });
  }
}

This example only handles POST requests. If any other method is used, it returns a 405 (Method Not Allowed) error. Remember to parse the request body (e.g., using JSON.parse(req.body)) if it's JSON data.

Deploying with Vercel

Deploying your Next.js application with serverless functions to Vercel is straightforward:

1. Create a Vercel account (if you don't have one).
2. Install the Vercel CLI: npm install -g vercel
3. Deploy your project: Navigate to your project directory in the terminal and run vercel.

Vercel automatically detects your Next.js project and deploys your API routes as serverless functions. You'll receive a URL where your application and API routes are accessible.

Example: Connecting to a Database

Here's a basic example of connecting to a database (e.g., MongoDB) within your serverless function. (Remember to install the necessary database driver, like mongodb.)

// pages/api/users.js
import { MongoClient } from 'mongodb';

const uri = process.env.MONGODB_URI; // Store this in Vercel environment variables

export default async function handler(req, res) {
  const client = new MongoClient(uri);

  try {
    await client.connect();
    const database = client.db("mydatabase");
    const users = database.collection("users");

    const allUsers = await users.find({}).toArray();

    res.status(200).json(allUsers);
  } catch (e) {
    console.error(e);
    res.status(500).json({ error: 'Failed to fetch users' });
  } finally {
    await client.close();
  }
}

Important: Never hardcode database credentials in your code. Use environment variables and store them securely in Vercel's project settings.

Conclusion

Next.js API routes and Vercel provide a simple and efficient way to build and deploy serverless functions. By mastering these tools, you can add dynamic functionality to your Next.js applications without the overhead of managing servers. Remember to handle errors gracefully and secure your API routes appropriately.