How to debug getStaticProps (and getStaticPaths) in Next.js

Question

I am trying to debug the getStaticProps() method of a React component included from my pages using console.log() like:

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

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

However, I am neither able to see any output on the console from which the app is being served, nor on the browser's console. I also tried restarting yarn dev and running yarn build to see if it would produce output then. Alas, no cigar.

So what is the correct way to produce and read debug output from getStaticProps() and getStaticPaths()?

kaan_a kaan_a · Accepted Answer · 2020-08-29T20:00:29

So after further research and testing I found out that getStaticProps() is only called on page components. So that was why I wasn't seeing any output. When I added the method to a component inside the pages directory I was able to see debug output produced with console.log() in the console running yarn dev on manual browser page refreshes (but not on automatic refreshes after modifying the page component) as well as during yarn build.

How to debug getStaticProps (and getStaticPaths) in Next.js

3 Answers