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

Question

我正在尝试使用以下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以查看它是否会产生输出。唉，没有雪茄。

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

Answer 1

您可以轻松调试下一个应用程序的服务器端代码。

\n

\n
1. 要启用它，您需要传递NODE_OPTIONS=\'--inspect\'给节点处理器。放置它的最佳位置是在 package.json 文件中，您可以在其中以开发模式 => 运行应用程序"dev": "NODE_OPTIONS=\'--inspect\' next dev" 。
\n
2. 现在在 Chrome 浏览器中打开一个新选项卡，然后访问chrome://inspect. 这将打开 chrome 开发工具检查，您可以在远程目标下看到您的 nextJs 服务器，只需单击\xc3\xacnspect。单击它将打开一个新的检查窗口。
\n
3. 现在只需将调试器放入 getStaticProps 函数中并重新加载客户端应用程序，您将在服务器端代码中看到断点。
\n

\n

我希望这会有所帮助。\n参考：https ://nextjs.org/docs/advanced-features/debugging#server-side-code

\n

Answer 2

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

Answer 3

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

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

   vercel dev