Back to articles

Serverless Functions with Next.js: The Ultimate Guide

Majd Muhtaseb07/15/20257 minutes

Introduction

Next.js offers a powerful way to build full-stack applications with serverless functions (also known as API routes). These functions allow you to handle backend logic directly within your Next.js project without the complexities of managing a traditional server. This guide will walk you through creating, deploying, and understanding serverless functions in Next.js.

Creating a Serverless Function

Serverless functions in Next.js are placed within the pages/api directory. Each file in this directory becomes an API endpoint. Let's create a simple endpoint that returns a JSON response.

Create a file named pages/api/hello.js:

export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' })
}

This function takes two arguments:

• req: An instance of http.IncomingMessage, plus some pre-built middlewares.
• res: An instance of http.ServerResponse, plus some helper functions.

Access this endpoint by navigating to /api/hello in your browser.

Handling Different HTTP Methods

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

export default function handler(req, res) {
  if (req.method === 'GET') {
    res.status(200).json({ message: 'This is a GET request' })
  } else if (req.method === 'POST') {
    const body = req.body;
    res.status(200).json({ message: 'This is a POST request', data: body })
  } else {
    res.status(405).json({ message: 'Method Not Allowed' })
  }
}

To test the POST request, you can use tools like curl or Postman.

Accessing Request Data

You can access data sent in the request body using req.body. For GET requests, you can access query parameters using req.query.

export default function handler(req, res) {
  const { id } = req.query;
  res.status(200).json({ id: id })
}

Access this endpoint with a query parameter like /api/myapi?id=123.

Deploying Serverless Functions

When you deploy your Next.js application to platforms like Vercel or Netlify, the files within the pages/api directory are automatically deployed as serverless functions. You don't need to configure any additional infrastructure.

Example: Reading from a Database (with caution)

While you can connect to a database directly from a serverless function, it's often not recommended for production due to potential cold start latency and database connection limits. Instead, consider using a dedicated backend service or a database platform optimized for serverless environments.

However, for demonstration purposes:

// DO NOT DO THIS IN PRODUCTION WITHOUT PROPER CONNECTION POOLING
// AND DATABASE OPTIMIZATION
export default async function handler(req, res) {
  // Simulate database query (replace with actual database call)
  await new Promise(resolve => setTimeout(resolve, 500)); // Simulate latency
  const data = { message: "Data from database" };
  res.status(200).json(data);
}

Conclusion

Serverless functions in Next.js provide a convenient and scalable way to build backend logic for your applications. By understanding how to create, handle requests, and deploy these functions, you can leverage the power of serverless computing without the operational overhead. Remember to optimize database connections and consider alternatives for production environments.