如何获取Next.js终端警告列表并在JS代码中处理

你看到的这类Bootstrap Sass弃用警告是Next.js编译阶段由Node.js侧的Sass编译器输出到进程标准输出/错误流的，不属于浏览器端运行时可直接获取的内容，需要先在构建配置层拦截日志，再通过开发服务透传到前端侧处理。

• 拦截Node侧Sass编译警告
  优先用Sass官方提供的logger钩子拦截，比直接监听进程输出更精准，不会混入其他无关终端日志。在项目根目录的next.config.js中添加如下配置：

  // next.config.js
  const path = require('path')
  // 存储捕获到的Sass警告
  const sassWarnings = []
  // 挂到全局避免模块缓存导致实例不共享
  global.__sassWarnings = sassWarnings
  
  /** @type {import('next').NextConfig} */
  const nextConfig = {
    sassOptions: {
      logger: {
        warn(message, span) {
          // 按需过滤目标警告，比如仅捕获Bootstrap相关的弃用提示
          if (message.includes('mixin has been deprecated') && message.includes('bootstrap')) {
            const warnItem = {
              content: message,
              source: span?.url ? path.relative(process.cwd(), span.url.toString()) : '',
              line: span?.start?.line || 0,
              timestamp: Date.now()
            }
            sassWarnings.push(warnItem)
            // 保留终端原有输出，不需要终端显示就注释下一行
            console.warn(`[Sass Warn] ${message}`)
          }
        },
        debug() {}
      }
    }
  }
  
  module.exports = nextConfig
  

  如果项目是ESM规范，把require和module.exports换成对应的import/export default语法即可。

• 开发环境添加警告查询接口
  新建开发环境专用的API路由，生产环境直接返回404避免泄露开发信息：

  • Pages Router路径：pages/api/dev/sass-warnings.js

    export default function handler(req, res) {
      if (process.env.NODE_ENV !== 'development') {
        return res.status(404).send('Not Found')
      }
      res.status(200).json(global.__sassWarnings || [])
    }
    

  • App Router路径：app/api/dev/sass-warnings/route.js

    import { NextResponse } from 'next/server'
    
    export async function GET() {
      if (process.env.NODE_ENV !== 'development') {
        return NextResponse.json({ error: 'Not Found' }, { status: 404 })
      }
      return NextResponse.json(global.__sassWarnings || [])
    }
    

• 前端侧获取并处理警告
  在项目根组件（_app.jsx/layout.jsx）中添加仅开发环境生效的逻辑，拉取警告后按需处理：

  if (process.env.NODE_ENV === 'development' && typeof window !== 'undefined') {
    const fetchSassWarnings = async () => {
      const res = await fetch('/api/dev/sass-warnings')
      if (!res.ok) return
      const warnings = await res.json()
      // 1. 打印到浏览器控制台
      warnings.forEach(warn => {
        console.warn('[Sass弃用警告]', warn.content, `\n来源：${warn.source}:${warn.line}`)
      })
      // 2. 挂到window对象全局统一管理
      window.__SASS_WARNINGS__ = warnings
    }
    // 页面加载后拉取，需要实时更新可以加轮询或者改成SSE推送
    window.addEventListener('load', fetchSassWarnings)
  }
  
  // 导出根组件的逻辑保持原有代码不变
  export default function App({ Component, pageProps }) {
    return <Component {...pageProps} />
  }
  

• 不需要实时更新警告的话，可以不用写API接口，直接通过webpack的DefinePlugin把编译阶段捕获到的警告注入到前端代码常量中，缺点是热更新时不会同步新产生的警告，只有全量重编译时才会更新。
• 可以在logger的判断逻辑里加自定义过滤规则，只保留你需要处理的警告类型，避免无关日志干扰。
• 需要实时获取新警告的话，可以把接口改成SSE长连接，Sass编译产生新警告时主动推送给前端，不需要前端定时轮询。

内容的提问来源于stack exchange，提问作者dac0n