A guide on leveraging console.log in Next.js

I'm having trouble displaying the output of an API call using console.log. The issue is that nothing appears in the console (both in the browser and Visual Studio Code). The only console.log that seems to work is within the RouteStatus function, but it shows undefined as a result.

Here's the code snippet:

import RefreshButton from "./refreshButton";
import { getHealthStatus } from "@/lib/health";

export async function getStaticProps() { 
    const health = await getHealthStatus()

    console.log(health) // Issue
    console.log({health}) // Issue
    console.log("test"); // Issue
    return {
      props: {
        health
      },
    };
  }


export default function RouteStatus({ health }) {

    console.log(health) // Works but shows undefined
    console.log({health}) // Works but shows undefined
    console.log("test"); // Works 

    return (
        <>
        </>
    )
}

The getHealthStatus function looks like this:

export async function getHealthStatus() {
    // Fetch data from an external API endpoint
    const res = await 
    fetch('https://example.net:8080/healthcheck')
    if (!res.ok) throw new Error('failed to fetch data')

    console.log(res.json()) // Issue

    return res.json();
  }

Is there a way to make it work properly? I'm attempting to show variables in the console and expect to see the results displayed.

Answer №1

When faced with this issue, I found that identifying the component type is crucial in determining where the console.log output will appear. If it's a server component, you can expect to see it in your development console.

On the other hand, for client components, the output will display in the browser console.

Answer №2

When exploring a Next.js project, keep an eye out for the function getStaticProps(). This special function is designed to run exclusively on the server side, making it essential for handling data fetching and pre-rendering tasks. To witness its operations in action, instead of inspecting the browser's console, direct your attention to the terminal where your app is running.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Executing jQuery AJAX requests in a chain with interdependent tasks

I am struggling to grasp the concept of magic deferred objects with jQuery. Consider the following code snippet: function callWebService(uri, filter, callback) { var data = {}; if (filter && filter != '') data['$filter&apos ...

Encountered an issue while attempting to retrieve data from the HTTP URL

I encountered an issue when trying to make a request to an HTTP URL from another domain using AJAX. Every time I attempt this, I receive an error callback. DOMException: Failed to execute 'send' on 'XMLHttpRequest': Failed to load { ...

NextJS API routes consistently provide a status code of 200 upon execution

I am new to the concepts of Next.js, and I recently encountered an issue while attempting to fetch data from an API. The API is designed to check if a user session exists (i.e., if the user is logged in) and then returns a JSON response through a GET reque ...

What could be causing the error when trying to use a PUT request with fetch in Vue?

Whenever I attempt to send a PUT request, an error pops up on the console. export function putUserData() { fetch(`${url}/user/${getCookie("ID")}`, { method: "PUT", headers: { "Authorization": `B ...

NodeJS npm module installed globally is unable to run the main/bin JavaScript file using node command

Here is an example of my package.json: { "name": "example-module", "version": "1.0.0", "bin": "./bin/example-module.js", "main": "./bin/example-module.js", "description": "Example module description", "homepage": "http://my.home.page.com", " ...

Div keydown event not being triggered in Vue

I've been struggling to get my event to fire despite following the instructions in the title. @keydown="keyPressed($event)" Although currently it looks like this, I have also attempted setting the tabIndex and adding it on mount as shown be ...

Updating the AngularJS view following a deletion process

I have a web application developed using AngularJS and Rails that carries out RESTful operations like create, read, and delete. After deleting an item, I need to refresh the page and update the view asynchronously. However, I am facing challenges in imple ...

Activate the function for items that are overlapping

Here is a scenario I am working on: HTML <body> <div> <p>Text</p> </div> <body> JQuery $('div').click(function(){ $(this).find('p').fadeToggle('fast'); }); $('bo ...

Scrolling up or down in an HTML webpage using a script

Seeking a code snippet for my website that will allow me to achieve the following functionality: Upon clicking on text_head1, a list of lines should scroll down. Subsequently, when I click on text_head2, the previous list should scroll up while the new l ...

What is the correct way to shut down a Node.js Express server?

Upon receiving a callback from the /auth/github/callback URL, I am faced with the task of closing the server. Utilizing the standard HTTP API, the server can be closed using the server.close([callback]) API function. However, when working with a node-expre ...

Rails Navigation Issue: JQuery Confirmation Not Functioning Properly

Having a Rails app, I wanted to replicate the onunload effect to prompt before leaving changes. During my search, I came across Are You Sure?. After implementing it on a form, I noticed that it only works on page refreshes and not on links that take you a ...

Using CKEditor in an AngularJS web application: Tips and tricks

I'm having trouble integrating the ckeditor into an HTML page that's built with angularjs. Despite trying out numerous examples, such as the ng-ckeditor and ckeditor directives, I haven't found a solution that works for me. What I need is ...

The NextJS npm run build command is successful when run locally, but it is encountering failures

I'm currently in the process of setting up a CI workflow for my NextJS app using Github Actions. Strangely, my npm run build command is failing within the CI workflow, even though it runs smoothly on my local machine. The error I'm encountering i ...

Encountered an issue in Typescript with error TS2554: Was expecting 0 arguments but received 1 when implementing useReducer and useContext in React

I've encountered several errors with my useReducers and useContext in my project. One specific error (TS2554) that I keep running into is related to the AuthReducer functionality. I'm facing the same issue with each Action dispatch. I've tri ...

Steps for implementing a datepicker in a dynamically generated element

Snippet of jQuery code that adds an element to a container $(container).append( '<label class="control-label col-md-3">Join Duration</label>' + '<div class="col-md-4">' + '<input type="text" name="join_dura ...

What strategies can I use to reduce the amount of event listeners assigned to buttons in jquery?

Currently, I am utilizing jquery 1.6.2 for my project. On one of the pages, I have a structure that resembles the following: <div id="section1"> <fieldset> <ul> <li> <input type="radio" name ...

Thumbnail Carousel Caption in Bootstrap 3

Is it possible to create a Bootstrap 3 carousel where the image changes when the mouse cursor hovers over the thumbnail under the carousel? Currently, I have a setup with the carousel and thumbnails below it. Typically in Bootstrap, the image changes autom ...

"Creating a Hyperlink that Navigates to Specific Content Within a

I have a situation where I am trying to link to sections on the page contained within collapsed fieldsets. My goal is that when a user clicks on this link, the page should scroll down and automatically expand the fieldset to display the content inside. E ...

The Outer Div Can't Contain Google Maps

I am currently working on integrating a map widget into a dashboard I created using gridstack.js. The sample widget layout that I am aiming for can be seen in the link below: https://i.sstatic.net/ZQP6G.png My goal is to embed the map within the inner (w ...

The number range filter in ng-table is malfunctioning

what I am trying to accomplish My goal is to create a column that can accommodate two numbers in order to filter numeric data within a specific range for that column. While sorting, pagination, and filtering by 'contain text' are working correct ...