如何在Next.js中调试getStaticProps和getStaticPaths

如何解决如何在Next.js中调试getStaticProps和getStaticPaths

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

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

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

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

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

解决方法

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

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

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

   vercel dev

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