如何在Next.js中使用console.log？API调用结果打印异常排查

1. 不同位置console.log的输出位置说明 #

并非所有console.log都会显示在同一个控制台，代码运行环境决定了日志的输出位置：

• getStaticProps：属于Next.js服务端/构建阶段执行的函数，代码运行在Node.js环境，日志只会输出在启动项目的终端窗口（比如VS Code下方的Terminal面板），不会出现在浏览器控制台。
• RouteStatus组件：运行在客户端浏览器（或服务端渲染时的服务端），你看到的日志来自浏览器开发者工具的Console面板。
• getHealthStatus：因在getStaticProps中调用，同样运行在Node.js环境，日志输出在终端窗口。

2. 解决health为undefined的问题 #

RouteStatus中health值为undefined，说明getStaticProps未获取到有效数据，问题出在getHealthStatus函数：

• 先检查fetch的URL是否正确：你写的https://exemple.net:8080/healthcheck可能存在拼写错误（比如exemple应为example），需确认接口能正常返回合法JSON数据。
• res.json()是异步操作，直接console.log(res.json())会打印Promise对象而非实际数据，要打印真实数据需添加await，同时注意res.json()只能调用一次，需先存储结果：

  export async function getHealthStatus() {
      const res = await fetch('https://exemple.net:8080/healthcheck')
      if (!res.ok) throw new Error('failed to fetch data')
  
      const data = await res.json()
      console.log(data) // 现在能打印实际返回的JSON数据
      return data;
  }
  

• 给getStaticProps添加错误捕获，避免接口异常导致props无法正常传递：

  export async function getStaticProps() { 
      try {
          const health = await getHealthStatus()
          console.log(health) // 该日志会出现在终端窗口
          return {
              props: {
                  health
              },
          };
      } catch (err) {
          console.error('获取健康状态失败：', err) // 终端会打印错误详情
          return {
              props: {
                  health: null // 或设置其他默认值
              },
          };
      }
  }
  

3. 查看所有位置console.log的方法 #

• 服务端/构建阶段代码（getStaticProps、getHealthStatus）：查看启动项目的终端窗口（VS Code的Terminal面板）。
• 客户端组件代码（RouteStatus）：打开浏览器开发者工具（F12），切换到Console面板查看日志。

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