如何在 Next.js 中调试 getStaticProps（和 getStaticPaths）答案

【问题标题】：How to debug getStaticProps (and getStaticPaths) in Next.js如何在 Next.js 中调试 getStaticProps（和 getStaticPaths）
【发布时间】：2020-12-18 08:57:00
【问题描述】：

我正在尝试使用 console.log() 调试我的页面中包含的 React 组件的 getStaticProps() 方法，例如：

export default class Nav extends React.Component {
    render() {
        return <nav></nav>;
    }

    async getStaticProps() {
        console.log('i like output, though');
    }
}

但是，我既无法在提供应用程序的控制台上看到任何输出，也无法在浏览器的控制台上看到任何输出。我还尝试重新启动yarn dev 并运行yarn build 以查看它是否会产生输出。唉，没有雪茄。

那么从getStaticProps() 和getStaticPaths() 生成和读取调试输出的正确方法是什么？

【问题讨论】：

标签： reactjs debugging next.js

【解决方案1】：

所以经过进一步的研究和测试，我发现getStaticProps() 只在页面组件上被调用。所以这就是为什么我没有看到任何输出。当我将该方法添加到 pages 目录中的组件时，我能够在手动浏览器页面刷新时看到使用 console.log() 在运行 yarn dev 的控制台中生成的调试输出（但在修改页面组件后不会自动刷新）以及yarn build期间。

【讨论】：

【解决方案2】：

getStaticProps 在服务器端而不是在客户端运行。

getStaticProps only runs on the server-side. It will never run on the client-side. It won’t even be included in the JS bundle for the browser.

参考：https://nextjs.org/learn/basics/data-fetching/getstaticprops-details

【讨论】：

【解决方案3】：

使用当前的下一个版本 (11.x)，您可以使用 console.log 打印出 getStaticProps() 函数中的任何数据。

您将在运行的终端中看到该输出

   vercel dev

【讨论】：