Next.js as a Backend

Author: Torgeir Helgesen Riseth <@tTownTom>

Next.js logo

Introduction

Next.js, initially recognized as a frontend framework, has evolved significantly to become a powerful full-stack tool. Designed to seamlessly integrate both front-end and back-end development, Next.js empowers developers to build robust and scalable web applications under one unified platform. Today, Next.js offers a variety of backend features such as API Routes, serverless functions, dynamic routing, incremental static regeneration, and database integration—all of which enable full-stack capabilities within a single codebase.

Brief History

2016: Next.js is introduced by Vercel as a React-based framework.
2016: Initial focus is on server-side rendering (SSR) and static site generation (SSG).
2016: Aimed to solve challenges related to building SEO-friendly and performance-optimized web applications.
2018–2020: Major updates expand Next.js into a more versatile tool.
2018: API Routes are introduced, enabling more flexible back-end logic.
2019: Serverless functions are added, supporting server-side operations without managing a dedicated server.
2020: Enhanced database integrations are launched, allowing for seamless full-stack development capabilities.

Features

Next.js offers a comprehensive set of features that make it a powerful choice for full-stack development. These features enable developers to build robust, scalable, and efficient web applications. From API creation to deployment, Next.js provides the tools necessary to handle both frontend and backend operations seamlessly. These are some of the key features that make Next.js stand out as a backend solution:

Feature	Description
Building APIs with Next.js	Explains how to create and manage RESTful or GraphQL APIs using Next.js API routes.
Incremental Static Regeneration (ISR)	Updates static pages incrementally after build time to keep content fresh.
Preview Mode	Enables developers to preview draft content before it’s published.
Serverless	Describes how to use Next.js serverless functions to handle backend logic without managing servers.
Edge Computing	Discusses how Next.js leverages edge computing to reduce latency by processing requests closer to users.
Authentication and Authorization	Details how to implement user authentication in Next.js apps.
Deployment and Scaling	Provides guidance on deploying Next.js applications and scaling them to handle increased traffic and workloads.

Below we will be exploring these topics closer. Each feature will be examined in detail, providing practical examples and best practices to help developers make the most of Next.js’s backend capabilities.

Building APIs with Next.js

Next.js follows a specific folder/file structure for creating API endpoints. All API routes are placed under the /pages/api directory, and each file within this directory corresponds to a unique endpoint. For instance, creating a file called products.js in the /pages/api folder will make the endpoint accessible at /api/products.

This file-based routing system significantly simplifies the process of creating new backend routes compared to traditional backend frameworks, where routes must often be manually defined in the server code. In Next.js, developers can easily add new API endpoints by creating a new file, and the corresponding route is automatically configured based on the file’s location.

Compared to traditional backend frameworks like Express.js, where defining routes often involves a combination of custom route logic and middleware, Next.js’s file-based routing offers a more intuitive and scalable approach for full-stack applications. This makes Next.js particularly appealing for projects that need rapid iteration and simpler route management.

Dynamic routing adds further flexibility. To create dynamic endpoints like /users/<id>, Next.js allows developers to use square brackets in filenames to indicate dynamic segments. For example, a file named [id].js within the /pages/api/users directory creates an endpoint accessible at /api/users/<id>. This dynamic file can then use the req.query object to access the value of the id parameter, enabling developers to handle requests for specific user IDs. This makes handling unique resource identifiers straightforward without needing additional route definitions in server configuration.

REST APIs

Next.js allows developers to create RESTful endpoints using API Routes, making it simple to add backend functionality without needing an additional server framework. API Routes can be organized by following best practices, including creating modular endpoints, using middleware for request processing, and centralizing error handling. Middleware can manage operations like authentication, validation, and logging, making API development more manageable.

Code Example:

To create a REST API endpoint using Next.js API Routes, you can start by creating a new file under the /pages/api directory of your Next.js project. Let’s consider a simple product management API:

let products = [
  { id: 1, name: "Laptop", price: 999 },
  { id: 2, name: "Phone", price: 499 },
];

export default function handler(req, res) {
  switch (req.method) {
    case "GET":
      res.status(200).json(products);
      break;
    case "POST":
      const newProduct = req.body;
      if (!newProduct.name || !newProduct.price) {
        res.status(400).json({ error: "Product name and price are required" });
      } else {
        newProduct.id = products.length + 1;
        products.push(newProduct);
        res.status(201).json(newProduct);
      }
      break;
    case "DELETE":
      const { id } = req.query;
      products = products.filter((product) => product.id !== parseInt(id));
      res.status(200).json({ message: "Product deleted successfully" });
      break;
    default:
      res.status(405).json({ error: "Method Not Allowed" });
  }
}

In this example, the handler function supports multiple request methods:

GET: Returns the list of products.
POST: Adds a new product to the list, ensuring that both the product name and price are provided.
DELETE: Deletes a product based on the provided id in the query parameters.

If a method other than GET, POST, or DELETE is used, the server responds with a 405 Method Not Allowed error.

This example shows the handling of different CRUD operations, showing how Next.js API Routes can be used to build practical backend functionality.

GraphQL APIs

In addition to REST, Next.js can also be used to implement GraphQL APIs. By integrating Apollo Server Micro, developers can set up a GraphQL server directly within the Next.js project. This integration allows for defining schemas, implementing resolvers, and querying data with the flexibility of GraphQL.

Code Example:

To create a GraphQL API using Apollo Server Micro in a Next.js project, you can create a new file under the /pages/api directory:

import { ApolloServer, gql } from "apollo-server-micro";

// Define the GraphQL schema
const typeDefs = gql`
  type Product {
    id: ID!
    name: String!
    price: Float!
  }

  type Query {
    products: [Product]
  }

  type Mutation {
    addProduct(name: String!, price: Float!): Product
  }
`;

// Sample data
let products = [
  { id: "1", name: "Laptop", price: 999 },
  { id: "2", name: "Phone", price: 499 },
];

// Define the resolvers
const resolvers = {
  Query: {
    products: () => products,
  },
  Mutation: {
    addProduct: (_, { name, price }) => {
      const newProduct = { id: String(products.length + 1), name, price };
      products.push(newProduct);
      return newProduct;
    },
  },
};

// Create the Apollo Server
const apolloServer = new ApolloServer({ typeDefs, resolvers });

export const config = {
  api: {
    bodyParser: false,
  },
};

export default apolloServer.createHandler({ path: "/api/graphql" });

In this example, the GraphQL server is set up with:

Type Definitions (typeDefs): Define the Product type and two operations — Query for retrieving all products and Mutation for adding a new product.
Resolvers: Implement the logic for each field in the schema. The Query resolver returns the list of products, and the Mutation resolver allows adding a new product to the list.

By visiting /api/graphql, developers can interact with the GraphQL server, sending queries and mutations to manage products. This example demonstrates how Next.js, along with Apollo Server Micro, can be used to build a practical GraphQL API.

A comparison between GraphQL and REST in the context of Next.js reveals that GraphQL’s flexibility makes it a suitable choice for applications requiring highly customized data fetching:

Feature	REST	GraphQL
Data Fetching	Fixed endpoints returning predefined data	Flexible queries that return only the requested data
Over-fetching/Under-fetching	Common due to fixed endpoints	Avoided by allowing clients to specify fields
Performance	Can lead to multiple requests for related resources	Fetches all required data in a single request
Use Case	Simple APIs, less complex data structures	Complex data relationships, highly customized fetching

These key differences can help developers decide when to use REST versus GraphQL. For simple use cases or when working with traditional CRUD operations, REST might be the better choice. However, for applications that require flexible and efficient data querying, GraphQL provides significant advantages.

Incremental Static Regeneration (ISR)

Incremental Static Regeneration (ISR) allows you to update static pages after they have been built, providing a way to keep content fresh without requiring a full rebuild of the application. ISR combines the benefits of static site generation—fast loading and pre-rendered pages—with the flexibility of dynamically updating content.

With ISR, pages are statically generated at build time and then updated incrementally based on a revalidation period. This means that content can be updated without having to rebuild the entire site, making it an ideal solution for pages that change frequently, such as blogs, product catalogs, or news sites.

Example of ISR Usage

Consider an e-commerce website that has a product catalog. Using ISR, the product pages can be initially generated as static pages during the build. If the product information changes (e.g., price updates or new stock), ISR allows those pages to be revalidated after a set interval, such as every 60 seconds, ensuring that users always see up-to-date content.

getServerSideProps

On the server side, Next.js can use getServerSideProps to ensure that product information, such as inventory levels, is always up-to-date. getServerSideProps is a function that allows you to fetch data on each request, making it ideal for pages that need to display dynamic data that changes frequently. This function runs on the server at request time and provides fresh data to the page before it is rendered.

Code Example:

export async function getServerSideProps(context) {
  // Fetch product data from an API or database
  const res = await fetch(
    `https://api.example.com/products/${context.params.id}`
  );
  const product = await res.json();

  // Pass data to the page via props
  return {
    props: { product },
  };
}

function ProductPage({ product }) {
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <p>Price: ${product.price}</p>
    </div>
  );
}

export default ProductPage;

In this example, getServerSideProps is used to fetch product data from an external API. The data is then passed to the ProductPage component as props, ensuring that the page always displays the latest product information.

getStaticProps

getStaticProps, on the other hand, can be used to fetch data at build time for pages that don’t need to update frequently. This approach helps in achieving faster load times by serving pre-rendered content, making it ideal for pages with content that doesn’t change often, such as static information or blog posts. Pages generated with getStaticProps are highly performant as they are pre-rendered and cached, allowing for fast and efficient delivery to the user.

To use ISR in a Next.js page, you can specify the revalidate property in getStaticProps:

export async function getStaticProps() {
  const productData = await fetchProductData();

  return {
    props: {
      product: productData,
    },
    revalidate: 60, // Revalidate the page every 60 seconds
  };
}

In this example, the page will be statically generated during the build, and then Next.js will regenerate it in the background whenever a user visits the page after the 60-second revalidation window has expired. This approach helps balance performance with keeping content fresh, providing a great user experience.

Preview Mode

Preview Mode in Next.js allows developers to bypass the static generation of a page to display unpublished or draft content. This feature is particularly useful when integrating with content management systems (CMS) where editors need to see changes before publishing them to live users. By enabling preview mode, the server dynamically renders content based on unpublished data, allowing for a complete preview experience.

Example of Using Preview Mode

To enable preview mode, you can use the res.setPreviewData() method inside an API route to activate the preview for the user. Once preview mode is enabled, subsequent requests to the application will bypass the static cache, enabling dynamic rendering.

export default function handler(req, res) {
  // Enable Preview Mode
  res.setPreviewData({});
  // Redirect user to the home page (or any other page)
  res.writeHead(307, { Location: "/" });
  res.end();
}

In this example, the setPreviewData() function enables preview mode, and the user is redirected to the specified page, which will now render dynamic, unpublished content. To exit preview mode, developers can use the res.clearPreviewData() method to disable it.

Serverless Functions

With serverless architecture, Next.js has the ability to scale dynamically based on demand. Serverless functions, deployed on platforms like Vercel or AWS Lambda, make it possible to execute backend code without maintaining a dedicated server. The term ‘serverless’ can be misleading, as there is still a server involved; however, the key difference is that developers do not need to manage or maintain the server infrastructure. The server management, scaling, and provisioning are handled automatically by the platform, allowing developers to focus purely on the code logic.

Examples of Serverless Functions in E-commerce

Order Processing: A serverless function can be triggered when a user places an order. This function can handle tasks like sending order confirmation emails, updating inventory, and preparing data for shipping.
Cart Management: A serverless function can be used to manage the shopping cart, such as calculating the total price, applying discounts, or validating stock availability in real time.
User Notifications: Serverless functions can be employed to send personalized notifications to users, such as when a product they are interested in is back in stock or when there is a sale on items in their wish list.

Code Example:

To create a serverless function that sends user notifications when a product is back in stock, you can use Vercel and an email API like SendGrid. Here’s an example of how to implement this in JavaScript:

import sendgrid from "@sendgrid/mail";
sendgrid.setApiKey(process.env.SENDGRID_API_KEY);

export default async function handler(req, res) {
  if (req.method !== "POST") {
    return res.status(405).json({ error: "Method Not Allowed" });
  }

  const { userEmail, productName } = req.body;

  const message = {
    to: userEmail,
    from: "no-reply@ecommerce.com",
    subject: `${productName} is Back in Stock!`,
    text: `Good news! The product you were waiting for, ${productName}, is now back in stock. Hurry up before it sells out again!`,
  };

  try {
    await sendgrid.send(message);
    res.status(200).json({ message: "Notification sent successfully" });
  } catch (error) {
    res.status(500).json({ error: "Failed to send notification" });
  }
}

In this example, the serverless function is deployed using Vercel, and it handles the request to send an email notification using SendGrid. The file is placed under the /pages/api directory, making it an API route accessible through the /api/notifyBackInStock endpoint. When a product is back in stock, this function can be triggered automatically by various means, such as a scheduled task, a webhook from the inventory management system, or a manual trigger by an admin.

Edge Computing

Next.js also offers the benefits of edge computing, which distributes functions closer to the user to reduce latency and improve load times—providing a distinct performance advantage compared to traditional centralized servers. These features are particularly useful in scenarios where scalable and low-latency backend services are required.

Examples of Edge Computing in Next.js

Continuing with our e-commerce examples, let’s say we want to handle a scenario where a user adds a product to their shopping cart. By utilizing an edge function, the shopping cart operations—such as adding an item, calculating the total price, and applying discounts—can be executed close to the user’s location. This ensures that the cart updates in real-time with minimal latency, providing a smoother experience for users, especially during high-traffic events like sales. Edge functions deployed with platforms like Vercel can run these operations at the edge, reducing the round-trip time between the user’s browser and the server, which is particularly beneficial for users located far from a central server.

Code Example:

To create an edge function that handles adding items to a shopping cart, you can use Vercel’s edge runtime. Here’s an example:

import { NextResponse } from "next/server";

import { connectToDatabase } from "../../../lib/mongodb";

export async function getCart(userId) {
  const db = await connectToDatabase();
  return await db.collection("carts").findOne({ userId });
}

export async function updateCart(userId, productId, quantity) {
  const db = await connectToDatabase();
  const cart = await db.collection("carts").findOne({ userId });
  if (cart) {
    const existingProductIndex = cart.items.findIndex(
      (item) => item.productId.toString() === productId
    );
    if (existingProductIndex !== -1) {
      cart.items[existingProductIndex].quantity += quantity;
    } else {
      cart.items.push({ productId, quantity });
    }
    await db
      .collection("carts")
      .updateOne({ userId }, { $set: { items: cart.items } });
  } else {
    await db
      .collection("carts")
      .insertOne({ userId, items: [{ productId, quantity }] });
  }
  return await db.collection("carts").findOne({ userId });
}

export const config = {
  runtime: "edge",
};

export default async function handler(req) {
  const { method } = req;

  if (method === "POST") {
    const { productId, quantity } = await req.json();
    if (!productId || !quantity) {
      return NextResponse.json(
        { error: "Product ID and quantity are required" },
        { status: 400 }
      );
    }

    // Add product to cart
    const existingProductIndex = cart.findIndex(
      (item) => item.productId === productId
    );
    if (existingProductIndex !== -1) {
      cart[existingProductIndex].quantity += quantity;
    } else {
      cart.push({ productId, quantity });
    }

    return NextResponse.json({
      message: "Product added to cart successfully",
      cart,
    });
  }

  return NextResponse.json({ error: "Method Not Allowed" }, { status: 405 });
}

In this example, the edge function is deployed using Vercel’s edge runtime, and it handles adding items to the shopping cart, stored on MongoDB. The function checks the request method, processes the product ID and quantity, and updates the cart accordingly. By running this function at the edge, the latency is reduced, providing a quicker response time for users regardless of their geographical location.

Authentication and Authorization

Implementing secure user authentication is a key aspect of any application, and Next.js offers multiple solutions. Developers can integrate Auth0 or NextAuth.js to handle secure user authentication and OAuth integration. Additionally, developers can also implement JWT-based authentication using API Routes to protect endpoints and manage user sessions. Best practices for security, including the use of HTTPS, environment variables for sensitive data, and limiting user permissions, ensure that the application remains secure.

NextAuth.js is a powerful authentication library designed specifically for Next.js, making it an ideal choice for seamless integration. It supports multiple authentication providers, including Google, Facebook, GitHub, and custom email/password setups, offering great flexibility for developers.

Note that NextAuth.js can be used outside of Next.js as well, but it is particularly well-suited for Next.js projects due to its tight integration with the framework.

Example of Authentication with NextAuth.js

To implement NextAuth.js in a Next.js project, you need to set up an API route to handle authentication. Here’s a simple example:

Install NextAuth.js:

npm install next-auth

Create an API route for authentication at /pages/api/auth/[...nextauth].js:

import NextAuth from "next-auth";
import Providers from "next-auth/providers";

export default NextAuth({
  providers: [
    Providers.Google({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
    Providers.GitHub({
      clientId: process.env.GITHUB_CLIENT_ID,
      clientSecret: process.env.GITHUB_CLIENT_SECRET,
    }),
  ],
  database: process.env.DATABASE_URL,
});

Add a sign-in page to your application (e.g., /pages/signin.js):

import { signIn, signOut, useSession } from "next-auth/client";

export default function SignInPage() {
  const [session] = useSession();

  return (
    <div>
      {!session ? (
        <>
          <h1>Please sign in</h1>
          <button onClick={() => signIn("google")}>Sign in with Google</button>
          <button onClick={() => signIn("github")}>Sign in with GitHub</button>
        </>
      ) : (
        <>
          <h1>Welcome, {session.user.name}</h1>
          <button onClick={() => signOut()}>Sign out</button>
        </>
      )}
    </div>
  );
}

In this example, NextAuth.js is used to set up Google and GitHub as authentication providers. The authentication logic is handled in the /pages/api/auth/[...nextauth].js route, and the sign-in page (/pages/signin.js) allows users to log in using Google or GitHub. The session management is handled by NextAuth.js, and you can easily extend this to add more providers or custom logic as needed.

Deployment and Scaling

The deployment of a Next.js application with backend functionality can be done on various platforms, including Vercel, AWS, and Google Cloud. Vercel, the creator of Next.js, offers the most seamless deployment process for Next.js applications. To deploy on Vercel, developers simply connect their GitHub, GitLab, or Bitbucket repository to Vercel, and with a few clicks, the application is automatically deployed.

Vercel Integration Benefits

Vercel provides a highly optimized environment for deploying Next.js applications, with built-in support for serverless functions and edge deployments. The integration between Vercel and Next.js is streamlined, allowing for continuous deployment (CI/CD) and version control directly from popular Git repositories. When changes are pushed to the repository, Vercel automatically builds and deploys the updated version of the application, making the deployment process fast and efficient.

Serverless Functions and Edge Deployments

Vercel handles serverless functions and automatic scalability, making it easy to manage heavy backend workloads without manual scaling or infrastructure management. The platform’s serverless functions are deployed globally, ensuring that backend logic is executed close to the user, which helps reduce latency and improve response times. Additionally, Vercel’s edge network allows developers to deploy edge functions that run at locations closer to users, providing ultra-low latency for critical operations.

Vercel’s scalability works by automatically adjusting the number of serverless function instances based on incoming traffic. When demand increases, Vercel will spin up additional instances of serverless functions to handle the increased load, ensuring that performance remains consistent. Similarly, during low-traffic periods, Vercel scales down to reduce costs. This auto-scaling mechanism allows developers to focus on their code without worrying about resource allocation and infrastructure bottlenecks. Monitoring and performance optimization tools such as LogRocket, Datadog, or Vercel’s built-in analytics help maintain and improve application performance.

Strengths and Weaknesses

Strengths

Full-Stack Capabilities: Next.js offers an integrated environment for both frontend and backend development.
Scalability: The serverless and edge computing capabilities of Next.js make it easy to scale without managing physical servers.
Developer Experience: The unified codebase improves productivity by simplifying the development process.

Weaknesses

Learning Curve: For developers coming from traditional front-end backgrounds, adapting to the full-stack nature of Next.js can be challenging.
Backend Limitations: For high-throughput backend services, Next.js may not be as performant as dedicated backend frameworks like Express or NestJS.
Serverless Costs and Cold Starts: Serverless functions, while convenient, can incur higher operational costs compared to traditional servers. Additionally, serverless functions may experience latency due to cold starts, especially during infrequent usage, which can impact user experience.
Vendor Lock-in: Using Next.js, especially when deploying on platforms like Vercel, can lead to a degree of vendor lock-in, making it harder to migrate to other hosting providers without significant adjustments.

Comparison with Similar Frameworks and Backend Solutions

Compared to Express.js, which is a minimalistic backend framework, Next.js offers more out-of-the-box features for full-stack development, eliminating the need to configure SSR or static generation manually. NestJS, on the other hand, offers more robust backend architecture with its modular approach and TypeScript support, which can be advantageous for larger, enterprise-level backend services. Nuxt.js, the Vue equivalent of Next.js, also provides similar features, but Next.js benefits from the larger React ecosystem.

Framework	Features and Strengths	Suitable Use Cases
Next.js	Full-stack capabilities, built-in SSR/SSG, serverless, and seamless Vercel integration	Projects needing integrated front-end and back-end, rapid prototyping, serverless deployments
Express.js	Minimalistic, flexible routing, middleware support	Simple backend services, custom server configurations
NestJS	Modular architecture, TypeScript, enterprise-level features	Large-scale applications needing robust architecture
Nuxt.js	Vue-based, SSR/SSG support, easy integration with Vue ecosystem	Projects where Vue is preferred, needing SSR/SSG capabilities

When considering other backend solutions beyond JavaScript frameworks, .NET is a powerful and mature framework used for building robust backend applications. .NET, particularly ASP.NET Core, provides enterprise-level features, excellent performance, and integration with Microsoft’s ecosystem, which is ideal for large-scale applications and those that require advanced security features. While .NET is more complex to learn compared to Next.js, it excels in scenarios where high-throughput services are needed, and integration with existing Microsoft services or on-premises solutions is a priority. Unlike Next.js, which focuses on combining front-end and back-end capabilities into a single platform, .NET is more specialized for backend development, providing fine-grained control over the server environment and performance optimizations.

Feature	Next.js	.NET (ASP.NET Core)
Focus	Full-stack, combines front-end and back-end	Specialized backend development
Ease of Use	Easier learning curve, especially for JavaScript developers	Steeper learning curve, requires knowledge of C# and Microsoft ecosystem
Deployment	Serverless and edge deployments via Vercel	Typically deployed on dedicated servers, Azure, or IIS
Performance	Great for serverless and edge-based applications	High performance for enterprise-level and high-throughput services
Integration	Tight integration with React ecosystem and Vercel	Deep integration with Microsoft services and on-premises solutions
Use Cases	Rapid prototyping, integrated web apps, serverless workloads	Enterprise applications, high-security, and high-throughput backend services

Conclusion

Next.js has emerged as a versatile tool for full-stack development, with capabilities that extend beyond the front-end into effective backend solutions. By offering features such as API Routes, serverless functions, and database integration, Next.js provides a unified development environment that saves time and effort. The future of Next.js lies in its continued expansion into edge computing and enhancing its full-stack capabilities, making it a solid choice for many modern web applications.

Developers should consider Next.js when they need a seamless integration of front-end and back-end within a single framework, particularly for projects that demand high scalability, flexibility, and improved developer experience.

References

Next.js official documentation https://nextjs.org/
Vercel documentation https://vercel.com/docs/
Apollo Server documentation https://www.apollographql.com/docs/apollo-server/
NextAuth.js documentation https://next-auth.js.org/getting-started/introduction
GraphQL documentation https://graphql.org/
SendGrid API documentation https://sendgrid.com/docs/