next.js如何使用logger日志

方式一使用getInitialProps来实现日志

优点

• 一次编写： 只用在_app.js文件编写一次即可全局生效

缺点

• 扩展单一： 只支持接口请求来扩展

// pages/_app.tsx

function App({ Component, pageProps }: AppProps) {
  return ...;
}

App.getInitialProps = async (appContext: AppContext) => {
  const { req } = appContext.ctx

  const info = {
    time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
    userAgent: req?.headers['user-agent'] || '',
    ip: req?.headers['x-forwarded-for'] as string || req?.socket.remoteAddress || '',
    referer: req?.headers['referer'] || '',
    path: req?.url
  }
  console.log(info)
  // 此处使用 fetch or axios 来实现日志扩展
  return {}
}

方法二使用getServerSideProps来实现日志

缺点

• 多次引用： 只可以在getServerSideProps钩子上生效

优点

• 扩展丰富： 可以使用 fs 或者 winston 、fetch 等多种实现方式实现日志扩展

// config/logger.ts

import Winston from 'winston';
export const logger = Winston.createLogger({...})

// server/requestLogger.ts

export function requestLogger(req: IncomingMessage) {
  import("@/config/logger").then(({ logger }) => {
    const info = {
      userAgent: req?.headers["user-agent"] || "",
      ip:
        (req?.headers["x-forwarded-for"] as string) ||
        req?.socket.remoteAddress ||
        "",
      referer: req?.headers["referer"] || "",
      path: req?.url,
    };

    logger.info(JSON.stringify(info));
  });
}

// pages/xxx.tsx
export const getServerSideProps: GetServerSideProps<ClientInfoPageProps> = async ({ req }) => {

  requestLogger(req);

  return ...;
}