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:
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
Occasional notes on software, tools, and things I learn. No spam.
Unsubscribe anytime.
Next, we wrap our route handlers with the withLogging function. Here's an example of how to wrap a POST handler:
import { NextRequest, NextResponse } from "next/server";
export const POST = withLogging(async (req: NextRequest) => {
return NextResponse.json({ message: "Hello, World!" });
});When a POST request is made to this endpoint, the console will log something like this:
POST - http://localhost:3000/api - 200 - {"message":"Hello, World!"}In Next.js, the body of the response is a ReadableStream. Once you read from the stream, it becomes locked, which can lead to errors if Next.js try to use it again. Cloning the response allows you to read the body without locking the original stream, ensuring the response can be returned untouched.
Here’s the relevant error you might encounter without cloning:
Error: failed to pipe response
[cause]: TypeError [ERR_INVALID_STATE]: Invalid state: The ReadableStream is locked
Cloning the response and then accessing its body ensures that the response remains in a valid state, especially for more complex responses like redirects or rewrites.
There is a slight performance overhead due to cloning the response and logging the data. However, this trade-off is generally acceptable given the benefits of improved visibility and easier debugging.
To control logging based on the environment, you can check process.env and conditionally apply the logging wrapper. This allows you to enable detailed logging in development while keeping production logs clean and efficient.
const withLogging = (handler: (req: NextRequest) => Promise<NextResponse>) => {
return async (req: NextRequest) => {
if (process.env.NODE_ENV === "development") {
const res = await handler(req);
const cloneResponse = res.clone();
const outputBody = await cloneResponse.text();
const logItems = [
req.method,
req.nextUrl.toString(),
res.status,
outputBody,
];
console.log(logItems.join(" - "));
return res;
} else {
return handler(req);
}
};
};This setup ensures that logging can be adjusted according to the environment, minimizing unnecessary overhead in production.
You can customize the logged items by adding more details to the logItems array. Be cautious to avoid logging sensitive information that could pose security risks or clutter the logs.
This approach provides a robust logging solution for Next.js applications, enabling better request tracking and response handling while maintaining application performance and security.