Console not working when navigating or starting server in NextJS

Question

I have a simple console.log('HELLO') statement in my src/app/page.js file and src/app/products/[id]/page.js in my next.js app as follows

Page() {
  console.log('HELLO')
  return <div><div/>
}

When I start the server or navigate between the two, the console statement does not work, but when I reload the page in the search bar by clicking enter to refresh, it works

Any idea why is this happening and how to fix it?

Answer 1

From you code example you simply are missing the right syntax. Create a file at src/app/page.js, this will give you access to the page at the root / of your page. Inside the file you add this code:

export default function Page() {
  console.log("Hello my root page!");
  return <div>Root Page</div>;
}

Please note that the log entry will not be visible in your browsers dev-tools but inside the console you have started the next dev server from, since every page is a server component by default.