Implementing Logging in Next.js | Updated 2024

35

Logging is crucial for monitoring and debugging applications in production. This guide will walk you through integrating logging capabilities into your Next.js application, ensuring you can effectively track errors, monitor performance, and gather valuable insights.

Prerequisites

Before you begin, ensure you have:

• Basic knowledge of Next.js
• Node.js installed on your machine
• A code editor and terminal ready

Steps for Implementing Logging in Next.js

Step 1: Setting Up Your Next.js Project

If you haven’t already set up a Next.js project, you can create one using the following commands:

npx create-next-app@latest nextjs-logging
cd nextjs-logging

Step 2: Installing Logging Libraries

Next.js applications typically use popular logging libraries like Winston or Bunyan. For this guide, we’ll use Winston.

Install Winston and its dependencies:

npm install winston
npm install winston-daily-rotate-file

or 

yarn add winston
yarn add winston-daily-rotate-file

Step 3: Configuring Winston for Logging

Create a logging configuration file (logger.js) in your project to set up Winston:

logger.js

const { createLogger, transports, format } = require('winston');
const { combine, timestamp, printf } = format;
const DailyRotateFile = require('winston-daily-rotate-file');

const logFormat = printf(({ level, message, timestamp }) => {
  return `${timestamp} ${level}: ${message}`;
});

const logger = createLogger({
  format: combine(timestamp(), logFormat),
  transports: [
    new transports.Console(),
    new DailyRotateFile({
      filename: 'logs/application-%DATE%.log',
      datePattern: 'YYYY-MM-DD',
      zippedArchive: true,
      maxSize: '20m',
      maxFiles: '14d',
    }),
  ],
});

module.exports = logger;

Step 4: Using the Logger in Your Next.js Application

You can now import and use the logger (logger.js) throughout your application, such as in API routes or specific components:

pages/api/hello.js

const logger = require('../../logger');

export default (req, res) => {
  logger.info('Hello API endpoint called.');
  res.status(200).json({ message: 'Hello from API!' });
};

Step 5: Customizing and Extending Logging

Extend logging capabilities by adding custom transports or formats as needed, such as integrating with third-party services or adding error handling:

logger.js (Extended Example)

const { createLogger, transports, format } = require('winston');
const { combine, timestamp, printf } = format;
const DailyRotateFile = require('winston-daily-rotate-file');

const logFormat = printf(({ level, message, timestamp }) => {
  return `${timestamp} ${level}: ${message}`;
});

const logger = createLogger({
  format: combine(timestamp(), logFormat),
  transports: [
    new transports.Console(),
    new DailyRotateFile({
      filename: 'logs/application-%DATE%.log',
      datePattern: 'YYYY-MM-DD',
      zippedArchive: true,
      maxSize: '20m',
      maxFiles: '14d',
    }),
    // Add more transports here as needed
  ],
  exceptionHandlers: [
    new transports.File({ filename: 'logs/exceptions.log' }),
  ],
});

module.exports = logger;

Step 6: Running Your Next.js Application

Start your Next.js development server to see logging in action:

npm run dev

or 

yarn dev

Conclusion

Integrating logging into your Next.js application using Winston provides robust capabilities for monitoring and debugging. By configuring Winston with daily log rotation and various transports, you can ensure comprehensive logging coverage across different environments. This setup empowers you to effectively track application behavior, diagnose issues, and optimize performance, enhancing the overall reliability and maintainability of your Next.js projects.

For more updates on programming trends and tutorials, visit blogsea.net regularly.

Implementing Logging in Next.js – FAQs