Next.JS — API |`pages/api`

Next.js is a popular React framework for building server-rendered and statically-generated web applications. It provides a powerful set of features and benefits that make it a compelling choice for developers. Here’s an introduction to what Next.js offers:

Next.js is a powerful React framework that combines server-side rendering (SSR) and static site generation (SSG) to deliver fully-rendered HTML to the client, resulting in faster initial page loads and improved performance. It offers a hybrid rendering model, allowing one to choose between SSR and SSG on a per-page basis, making it flexible for dynamic and static content. Next.js automatically splits JavaScript bundles into smaller chunks, enabling faster page loads by loading only the required code. With a built-in client-side router, seamless navigation between pages is achieved without full page refresh, enhancing the user experience. Next.js simplifies backend development by providing serverless API endpoints through API routes, eliminating the need for a separate server or framework. It also supports CSS and Sass styling, integrates with authentication and authorization libraries, and offers a rich ecosystem of plugins and extensions for SEO optimization, internationalization, state management, and more. With features like hot module reloading, error overlays, automatic TypeScript support, and performance analysis tools, Next.js prioritizes a smooth developer experience.

Next.js introduces the pages/api paradigm, where files placed in the pages/api directory become serverless API endpoints. Each file represents a specific API route, with the file name determining the URL path. Inside these files, export functions that handle incoming HTTP requests, to perform server-side operations such as data fetching, form processing, or interaction with external APIs. Next.js automatically handles routing and request handling, simplifying the creation of serverless APIs within the Next.js application. With this approach, one can build full-stack applications without the need for an additional backend server or framework.

import { NextApiRequest, NextApiResponse } from 'next';

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  if (req.method === 'GET') {
    // Handle GET request
    const data = { message: 'Hello from the API!' };
    res.status(200).json(data);
  } else if (req.method === 'POST') {
    // Handle POST request
    const { name } = req.body;
    const message = `Hello, ${name}!`;
    res.status(200).json({ message });
  } else {
    // Handle other HTTP methods
    res.setHeader('Allow', ['GET', 'POST']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

1. The handler function is the default export of the API route script.
2. It receives the NextApiRequest and NextApiResponse objects as parameters, representing the incoming request and the response to be sent.
3. Inside the function, one can use conditional statements to handle different HTTP methods (GET, POST, etc.).
4. For a GET request, it sends a JSON response with a simple message.
5. For a POST request, it extracts the name field from the request body and sends a customized greeting message.
6. For other HTTP methods, it sets the appropriate response headers and returns a 405 Method Not Allowed status.

Note that one needs to have the necessary Next.js and TypeScript configurations in place for this code to work correctly. Make sure the required dependencies are installed and the tsconfig.json and next.config.js files set up accordingly.

Remember to run npm run dev or yarn dev to start the Next.js development server and test the API route locally. One can access the API at /api/hello.

Next.js API routes are a significant feature that simplifies the creation of serverless API endpoints within the Next.js application. By leveraging the pages/api paradigm, one can define custom server-side functions that handle HTTP requests, perform server-side operations, and interact with databases or external APIs. This eliminates the need for a separate backend server or framework, allowing one to build full-stack applications with Next.js. The integration of API routes within Next.js provides a seamless development experience, where routing, request handling, and deployment are automatically handled. With Next.js API routes, one can efficiently build robust and scalable applications with both frontend and backend functionality in a unified codebase.