Nextjs not logging console.log or console.error when running with "next"

Question

So I have this logs in my server.js file:

  console.info("LOOGGGGGSSSS")
  console.warn("LOOGGGGGSSSS")
  console.log("LOOGGGGGSSSS")
  console.error("LOOGGGGGSSSS")

My package.json has script:

  "scripts": {
    "dev": "next",
    "start": "next start"
  }

When I run server with npm run start all works correctly and I can see logs but with npm run dev no console.log() or console.error() works at all.

I tried with option quiet true and false but still not working:

const nextJsApp = next({dev, quiet: false}); // no logs in terminal

and

const nextJsApp = next({dev, quiet: true}); // still no logs in terminal

My next.config.js

require("dotenv").config();
const withCSS = require('@zeit/next-css');
const webpack = require('webpack');

const apiKey =  JSON.stringify(process.env.SHOPIFY_API_KEY);

module.exports = withCSS({
    webpack: (config) => {
        const env = { SHOPIFY_API_KEY: apiKey };
        config.plugins.push(new webpack.DefinePlugin(env));
        return config;
    },
});

The next command does not run your server.js file. If you want to run server.js, run node server.js. More information here: nextjs.org/docs/advanced-features/custom-server — AryanJ-NYC
– AryanJ-NYC, Commented Apr 16, 2020 at 4:37

Penny Liu · Accepted Answer · 2021-02-08 12:19:31Z

53

Go to the terminal where you ran npm run dev. You should be able to see your console log there.

edited Feb 8, 2021 at 12:19

Penny Liu

17.9k5 gold badges89 silver badges109 bronze badges

answered Nov 4, 2020 at 9:30

gignu

2,5671 gold badge21 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Getzel Over a year ago

but i want to see it in chrome console

Krusty the Clown Over a year ago

@Getzel The whole point of a server side component / server side rendering (getStaticProps) is that any JavaScript logic is performed on, well, the server, before it gets to the client. So if you want to see it in your browser, you have to call console.log in your client side logic.

Mika · Accepted Answer · 2021-03-01 17:59:06Z

12

If you want to see your server logs in local development mode, you do not need to use your own server. You can edit the dev Script in your package.json like this:

"dev": "NODE_OPTIONS='--inspect' next dev",

and when you run your dev (npm run dev) you can go in Chrome to: chrome://inspect.

At the bottom under remote target, click on inspect.

answered Mar 1, 2021 at 17:59

Mika

6527 silver badges15 bronze badges

3 Comments

Eloi Over a year ago

not working for me: 'NODE_OPTIONS' is not recognized as an internal or external command, operable program or batch file.

Sigex Over a year ago

This didn't work

sp00n Over a year ago

In Windows you need to use the cross-env package to be able to set the NODE_OPTIONS variable, as seen in the answer by waliby.

Jason R Stevens CFA · Accepted Answer · 2023-06-16 19:45:45Z

9

I used the package cross-env to avoid some issue when working with different OS.

"dev": "cross-env NODE_OPTIONS='--inspect' next dev"

Works just fine, I can now see all my logs mixed with Next logs.

See this in the official Next.js docs.

edited Jun 16, 2023 at 19:45

Jason R Stevens CFA

3,2413 gold badges30 silver badges30 bronze badges

answered Dec 23, 2021 at 8:58

waliby

1111 silver badge6 bronze badges

1 Comment

mikestaub Feb 1 at 19:12

This seems to break the hot reloading feature of the app

CodeDude · Accepted Answer · 2023-07-07 11:52:23Z

3

I think it's cause you have to use "use client"

if your using next.js 13, every component is a server side component by default which means the component won't run on the browser, if you want to use client side components write "use client" on the top of your file.

but I won't recommend putting "use client" on top just because you want the information to display in the browser you can see this link to learn more about client side and server side components https://nextjs.org/docs/getting-started/react-essentials

answered Jul 7, 2023 at 11:52

CodeDude

1277 bronze badges

Comments

RobinJoe · Accepted Answer · 2024-02-22 11:00:27Z

2

The console.log info is on the terminal.

Open your OS terminal, look at your terminal, you will see the console.log data.

edited Feb 22, 2024 at 11:00

RobinJoe

9245 silver badges11 bronze badges

answered Feb 14, 2024 at 13:46

Adande Sylvain

332 bronze badges

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Emre · Accepted Answer · 2022-10-02 22:34:09Z

1

I had to remove this from my next.config.js. I figured it only applied for production, but maybe not.

    removeConsole: {
      exclude: ["error"],
    },

I will add this to tsconfig.json instead:

"removeComments": true,

answered Oct 2, 2022 at 22:34

Emre

92911 silver badges13 bronze badges

1 Comment

Jonathan Laliberte Over a year ago

thanks lol that was my issue

Prateek Verma · Accepted Answer · 2024-05-05 12:56:34Z

0

In Next.js, console messages don't show up in the browser by default because pages are server-rendered. To fix this, add "use client" at the top of your file to make console.log messages visible in the browser console. Happy coding! 👍

edited May 5, 2024 at 12:56

answered May 4, 2024 at 12:56

Prateek Verma

366 bronze badges

Comments

CrackerKSR · Accepted Answer · 2024-07-11 08:47:19Z

-1

I encountered the same issue. Later I found that all the console.log outputs of UI component (frontend) were visible in the browser console and non UI methods or backend logs in terminals.

Example:


// on browser console
export default function Detail({ id, data, notFound }) {
  console.log(" data ",notFound) 
  
  useEffect(() => {
    console.log("Component mounted or updated"); // on browser console
  }, []);
  
  return (
    <> ... </>
  );
}

// on IDE terminal
export async function getStaticPaths() {
  console.log("Generating static paths"); 
  return {
    paths: [],
    fallback: 'blocking',
  };
}

// on IDE terminal
export async function getStaticProps({ params }) {
  const { id } = params;
  console.log('Fetching data for id:', params?.id);
  
  try {
    const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
    if (!res.ok) {
      return { props: { notFound: true } };
    }
    const data = await res.json();
    console.log('Fetched data:', data);
    return { 
      props: { data },
      revalidate: 60
    };
  } catch (error) {
    console.error('Error fetching data:', error.message);
    return { props: { notFound: true } };
  }
}

edited Jul 11, 2024 at 8:47

answered Jun 6, 2024 at 16:19

CrackerKSR

2,0281 gold badge18 silver badges42 bronze badges

1 Comment

CrackerKSR Over a year ago

Edited answer for correction and added example for more clarity.

juliomalves · Accepted Answer · 2021-12-24 19:41:40Z

-2

As @AryanJ-NYC mentioned, when using a custom server in Next.js you'll need to update the scripts in package.json to run the server.js file.

"scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "NODE_ENV=production node server.js"
}

answered Dec 24, 2021 at 19:41

community wiki

juliomalves

Collectives™ on Stack Overflow

Nextjs not logging console.log or console.error when running with "next"

9 Answers 9

2 Comments

3 Comments

1 Comment

Comments

1 Comment

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

2 Comments

3 Comments

1 Comment

Comments

1 Comment

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related