Logging API Requests

Welcome back! In the last lessons, you learned how to validate incoming data and how to centralize error responses in your API. Now, let’s take another important step in building robust APIs: logging requests.

Logging means keeping a record of what happens in your API. This is very useful for several reasons:

• Debugging: If something goes wrong, logs help you see what requests were made and what data was sent.
• Monitoring: Logs let you track how your API is being used, which can help you spot unusual activity or performance issues.
• Auditing: Sometimes, you need to know who did what and when, especially for security or compliance reasons.

In this lesson, you will learn how to log requests in your Next.js API using middleware. Middleware is a special function that runs before your API route handles the request. This is a great place to add logging because it lets you capture every request in one place.

Middleware in Next.js is a function that runs before your API route or page is processed. It can be used for many things, such as authentication, logging, or modifying requests and responses.

Here’s how middleware fits into the request flow:

1. A request comes in from a client (like a browser or another server).
2. The middleware runs first. It can read or change the request, log information, or even stop the request.
3. If the middleware allows the request to continue, it moves on to your API route handler.

Middleware is a powerful way to add features to all or some of your API routes without repeating code in every file.

Here is a simple flow which demonstrates where middleware sits:

Request → Middleware (log + inspect) → API Handler → Response

Let’s build a middleware that logs every API request. Here’s the code you’ll use in your src/middleware.ts file:

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const start = Date.now();

  const response = NextResponse.next();

  const logEntry = {
    timestamp: new Date().toISOString(),
    method: request.method,
    path: request.nextUrl.pathname,
    userAgent: request.headers.get('user-agent') ?? 'unknown',
    ip: request.headers.get('x-forwarded-for') ?? request.ip ?? 'unknown',
    durationMs: Date.now() - start,
  };

  console.log(JSON.stringify(logEntry));
  return response;
}

// The config object specifies which paths the middleware should run on.
export const config = {
  // The matcher applies this middleware to all routes under /api/.
  // The ':path*' part ensures it matches nested routes as well.
  matcher: '/api/:path*',
};

Let’s break down what’s happening here:

• Importing Next.js Middleware Tools:
  We import NextResponse and NextRequest from next/server. These help us work with requests and responses in middleware.

• The middleware Function:
  This function runs for every matching request.

  • const start = Date.now(); records the time when the request started.
  • const response = NextResponse.next(); lets the request continue to the API route.
  • We create a logEntry object with details about the request:
    • timestamp: When the request was received.
    • method: HTTP method (GET, POST, etc.).
    • path: The path of the request.
    • userAgent: Information about the client making the request.
    • ip: The IP address of the client.
    • durationMs: How long the middleware took to run (in milliseconds).
  • console.log(JSON.stringify(logEntry)); prints the log entry as a JSON string.

• The config Object:
  This tells Next.js to run this middleware only for routes that start with /api/. The :path* part means it will match all nested API routes.

Example Output:
When you make a request to your API, you might see something like this in your server logs:

{"timestamp":"2024-06-01T12:34:56.789Z","method":"GET","path":"/api/hello","userAgent":"Mozilla/5.0 ...","ip":"127.0.0.1","durationMs":1}

This log entry gives you a clear record of what happened for each request.