Pino

ピノ

Pino (ピノ) を分かりやすく

Pino は、高速で軽量なログライブラリであり、Node.js アプリケーションにおいて、効率的にログを出力することができます。

Next.js で Pino を使う方法

1. Pino のインストール

まずは、Pino をプロジェクトにインストールします。次のコマンドを実行してください。

npm install pino

2. Pino を Next.js と TypeScript の環境で使えるように設定

Pino を Next.js と TypeScript の環境で使うために、logger.ts というファイルを作成し、以下のようなコードを記述します。

// logger.ts
import pino from 'pino'

const logger = pino({
  level: process.env.LOG_LEVEL || 'info',
  prettyPrint: {
    levelFirst: true,
    colorize: true,
  },
})

export default logger

ここで、level はログの出力レベルを指定し、prettyPrint はログの見やすさを向上させるオプションです。

3. API ルートで Pino を使ってログを出力

pages/api/hello.ts という API ルートを作成し、Pino を使ってログを出力する例を以下に示します。

// pages/api/hello.ts
import type { NextApiRequest, NextApiResponse } from 'next'
import logger from '../../logger'

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  logger.info('API route called: /api/hello')

  res.status(200).json({ message: 'Hello from Pino!' })
}

ここでは、logger.info を使ってログを出力しています。同様に、他のログレベル（debug、warn、error など）も利用できます。

カスタムフックを使って Pino のログを画面に表示

1. カスタムフックの作成

useLogger.ts というカスタムフックを作成し、Pino のログを React コンポーネント内で使えるようにします。

// hooks/useLogger.ts
import { useEffect } from 'react'
import logger from '../logger'

export function useLogger(message: string, level: 'info' | 'debug' | 'warn' | 'error' = 'info') {
  useEffect(() => {
    logger[level](message)
  }, [message, level])
}

このカスタムフックでは、useEffect を使って、message と level の値が変わったときにログを出力します。

2. カスタムフックをコンポーネントで使用

次に、pages/index.tsx のようなコンポーネントで useLogger カスタムフックを使って、Pino のログを画面に表示する例を示します。

// pages/index.tsx
import type { NextPage } from 'next'
import { useLogger } from '../hooks/useLogger'

const Home: NextPage = () => {
  useLogger('Rendering HomePage', 'info')

  return (
    <div>
      <h1>Welcome to our Next.js app with Pino!</h1>
    </div>
  )
}

export default Home

このように、useLogger カスタムフックを使って、コンポーネント内でログを出力することができます。

ミドルウェアを使って Pino のログを自動的に出力

Next.js の API ルートでは、ミドルウェアを使って Pino のログを自動的に出力することができます。

1. ミドルウェアの作成

middlewares/loggerMiddleware.ts というミドルウェアを作成し、以下のようなコードを記述します。

// middlewares/loggerMiddleware.ts
import { NextApiRequest, NextApiResponse } from 'next'
import logger from '../logger'

const loggerMiddleware = (handler: (req: NextApiRequest, res: NextApiResponse) => void) => (req: NextApiRequest, res: NextApiResponse) => {
  logger.info(`API route called: ${req.url}`)
  return handler(req, res)
}

export default loggerMiddleware

ここでは、req.url を使って API ルートの URL を取得し、それをログに出力しています。

2. API ルートでミドルウェアを使用

次に、pages/api/hello.ts のような API ルートで loggerMiddleware を使って、Pino のログを自動的に出力する例を示します。

// pages/api/hello.ts
import type { NextApiRequest, NextApiResponse } from 'next'
import loggerMiddleware from '../../middlewares/loggerMiddleware'

const handler = (req: NextApiRequest, res: NextApiResponse) => {
  res.status(200).json({ message: 'Hello from Pino and middleware!' })
}

export default loggerMiddleware(handler)

このように、ミドルウェアを使って API ルートのログを自動的に出力することができます。

まとめとして、Pino を Next.js と TypeScript の環境で使用する方法を解説しました。Pino を使って、高速で軽量なログを効率的に出力することができます。

Next.js を学ぶ一覧へ