CODEWITHSUNDEEP
reactjsdebuggingnext.js
kaan_atakan
kaan_atakan

Reputation: 4047

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

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()?

Upvotes: 36

Views: 22857

Answers (7)

Boopy
Boopy

Reputation: 553

Actually getServerSideProps only runs on server-side and never runs on the browser. So console.log() or debugger statement can't be visible in the browser. When does getServerSideProps run.


This is how you can see them:

  • console.log

It will be visible in your terminal when you run your dev environment like npm run dev, pnpm dev, ... in order to start your server.

export const getServerSideProps = async () => {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')

  console.log(res)

  const repo = await res.json()

  console.log(repo)

  return { props: { repo } }
}
 
export default function Page({ repo }) {
  return repo.stargazers_count
}

  • debugger

The debugger statement is a debug breakpoint, so you have to start your server in debug mode:

  1. Add in your package.json a new script like "debug": "NODE_OPTIONS='--inspect' next dev". Run it and get the correct port in your terminal. (see the below picture as example)
  ...
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "debug": "NODE_OPTIONS='--inspect' next dev"
  },
  ...

Get the correct port in your terminal: enter image description here

  1. Just open a new Chrome tab and navigate to chrome://inspect. Click on the Open dedicated DevTools for Node link.

enter image description here

Now you can add a new connection:

enter image description here


After this operation you can just debug your getServerSideProps function like that:

export const getServerSideProps = async () => {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')

  debugger

  // You also can use console.log()
  // console.log(res)

  const repo = await res.json()

  debugger

  return { props: { repo } }
}
 
export default function Page({ repo }) {
  return repo.stargazers_count
}

This is the nextjs documentation about debugging

Upvotes: 0

machineghost
machineghost

Reputation: 35750

It turns out Next deliberately hides console.log output in getStaticProps functions (and presumably other server-side code).

However, there's a simple fix to disable that behavior! In next.config.js add:

compiler: {
    removeConsole: false,
},

and the console output will appear again.

NOTE: It will appear in the terminal where you started the server (presumably where you ran npm run dev, since presumably you're debugging in a development environment).

It will not appear in the browser's console: since this is server-side output, it never makes it to the browser.

Upvotes: 4

Abdulrahim Klis
Abdulrahim Klis

Reputation: 494

Your console.log will work but in the console of your app Terminal, not in the console in the browser. There you can check your message.

Also, if you get data [Object] then just in that console, make JSON.stringify(yourValue).

if it's a bigger object than stringify you can write like JSON.stringify(yourValue, null, 2) and it will be displayed within JSON way.

Upvotes: 2

Hasibullah Sahibzada
Hasibullah Sahibzada

Reputation: 161

You can easily debug server-side code of your next application.

  1. To enable it you need to pass NODE_OPTIONS='--inspect' to your node processor. Best place to put it is in your package.json file where you run the app in dev mode => "dev": "NODE_OPTIONS='--inspect' next dev" .
  2. Now open a new tab in your chrome browser, and visit chrome://inspect. This will open chrome dev tool inspect where you can see your nextJs server under Remote Targets, Just click ìnspect. By clicking that it will open a new inspect window.
  3. Now simply put debugger inside your getStaticProps function and reload your client app, you will see the breakpoint in your server side code.

I hope this helps. Reference: https://nextjs.org/docs/advanced-features/debugging#server-side-code

Upvotes: 16

Reinhard
Reinhard

Reputation: 1746

Using the current next version (11.x) you can use console.log to print out any data in the getStaticProps() function.

You will see that output in the terminal where you run

   vercel dev

Upvotes: 5

Amit Dhaterwal
Amit Dhaterwal

Reputation: 83

getStaticProps runs on the server-side and not on the client-side.

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.

Ref: https://nextjs.org/learn/basics/data-fetching/getstaticprops-details

Upvotes: 4

kaan_atakan
kaan_atakan

Reputation: 4047

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.

Upvotes: 24

Related Questions