【Next.js】pino-prettyの導入方法

Next.jsでPinoを使用している場合にpino-prettyの設定を以下のように記述するとエラーが発生します。

logger.ts

const pino = require('pino')

const logger = pino({
  transport: {
    target: 'pino-pretty',
    options: {
      colorize: true
    }
  }
})

 ⨯ uncaughtException: Error: the worker has exited
    at ThreadStream.write (webpack-internal:///(rsc)/./node_modules/thread-stream/index.js:238:19)
    at Pino.write (webpack-internal:///(rsc)/./node_modules/pino/lib/proto.js:217:10)
    at Pino.LOG [as debug] (webpack-internal:///(rsc)/./node_modules/pino/lib/tools.js:62:21)
    at fetchData (webpack-internal:///(rsc)/./src/utils/api/fetch-data.ts:40:62)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async eval (webpack-internal:///(rsc)/./src/utils/api/server/validate-token.ts:24:29)
    at async CurrentUserInfo (webpack-internal:///(rsc)/./src/components/pages/account-page/current-user-info/index.tsx:59:33)

エラーを回避するにはnext.config.jsに以下を追記します。

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    serverComponentsExternalPackages: ['pino'],
  },
};

module.exports = nextConfig;

serverComponentsExternalPackagesはNext.js v15.0.0から安定版となるため、以下のように書き換える必要があります。

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  serverExternalPackages: ['pino'],
}
 
module.exports = nextConfig

参考