Logging route handler responses in Next.js 14

June 19, 2024

Switching from Express.js to Next.js for your server-side needs can be quite the transition, especially when it comes to maintaining the same level of request logging. In Express.js, tools like morgan or express-request-logger are commonly used to log requests, but Next.js requires a different approach. Here’s how you can achieve similar logging functionality in your Next.js application:

Creating a Logging Wrapper

Next.js does not support traditional middleware for intercepting responses. However, you can still log requests by wrapping your route handlers in a higher-order function. Let's create a function called withLogging to wrap around our route handlers. This function will log the request details and response body while ensuring that the response stream remains accessible and unchanged.

import { NextRequest, NextResponse } from "next/server";
 
const withLogging = (handler: (req: NextRequest) => Promise<NextResponse>) => {
	return async (req: NextRequest) => {
		// Call the handler and get the response
		const res = await handler(req);
 
		// Clone the response to avoid locking the stream

Creating a Logging Wrapper

import { NextRequest, NextResponse } from "next/server";
 
const withLogging = (handler: (req: NextRequest) => Promise<NextResponse>) => {
	return async (req: NextRequest) => {
		// Call the handler and get the response
		const res = await handler(req);
 
		// Clone the response to avoid locking the stream

Online

Logging route handler responses in Next.js 14

Creating a Logging Wrapper

Logging route handler responses in Next.js 14

Creating a Logging Wrapper

Why Clone the Response?

Performance Overhead

Environment-Based Logging

Customizing Logs