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

Posted 2023-03-30

技术标签:

【中文标题】如何在 Next.js 中调试 getStaticProps（和 getStaticPaths）【英文标题】：How to debug getStaticProps (and getStaticPaths) in Next.js 【发布时间】：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() 生成和读取调试输出的正确方法是什么？

【问题讨论】：

【参考方案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() 函数中的任何数据。

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