Obtaining information in next.js results in an undefined output

Struggling to retrieve information from the following API using next.js. Despite my efforts, I keep receiving an 'undefined' response and I am unable to pinpoint the issue. Below is a snippet of the code - any assistance in identifying my mistake would be greatly appreciated.

export async function getServerSideProps(context) {
  const res = await fetch(
    'https://shazam.p.rapidapi.com/charts/track?locale=en-US&pageSize=20&startFrom=0',
    {
      method: 'GET',
      headers: {
        'x-rapidapi-host': 'shazam.p.rapidapi.com',
        'x-rapidapi-key': 'my_key',
      },
    },
  );

  const data = await res.json();

  if (!data) {
    return {
      notFound: true,
    };
  }

  return {
    props: {
      data: data,
    },
  };
}

Answer №1

Check out this code snippet for a new perspective and to catch any potential errors.

fetch("https://shazam.p.rapidapi.com/charts/track?locale=en-US&pageSize=20&startFrom=0", {
    "method": "GET",
    "headers": {
        "x-rapidapi-host": "shazam.p.rapidapi.com",
        "x-rapidapi-key": "*****"
    }
})
.then(response => {
    console.log(response);
})
.catch(err => {
    console.error(err);
});

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

Configure environment variables for either grunt or grunt-exec

Attempting to utilize grunt-exec for executing a javascript test runner while passing in a deployed link variable. This is being done by initializing an environment variable grunt.option('link') with the help of exec:setLink. Within my test_runn ...

Transfer the contents from the text box field into the <p> tag

I know how to transfer text from one textbox to another in JS, but I'm interested in moving the text from a textbox to a paragraph. Can anyone explain how to achieve this? Thank you Update: Apologies for not being more specific earlier. I'm att ...

My [slug] "dynamic page" functions flawlessly on my LOCALHOST but displays a 404 error on both VERCEL and GITHUB

I successfully created a website with a homepage, homepage/blog, and homepage/blog/[slug]. Everything is running smoothly on my LOCALHOST setup. (https://i.sstatic.net/8i1RP.jpg) (https://i.sstatic.net/GGhMI.jpg) However, when I try to access homepage/bl ...

Utilizing the json_encode() function in PHP and JSON.parse() method in JavaScript for handling file data interchange

Utilizing json_encode() in PHP to store an array in a file, then leveraging JSON.parse() in JavaScript on the client side to read the json encoded file and pass it as an array to a sorting algorithm: The result of my json_encode() operation in the ...

Is it possible for my OAuth2 callback page to share the same HTML page? Also, what is the process for obtaining the token?

In my setup, I am working with static html and javascript along with C# Web API. One of the scenarios I encountered involves a link that triggers an oauth2 server from my HTML file named index.html. The question arises: Is it appropriate to establish the c ...

WebGL Error: An invalid operation occurred while trying to use the uniformMatrix4fv function. The error code [WebGL-00000A18072FEA00

Currently, I am working on an app that showcases 360° images and I rely on the BabylonJS library for this feature. The navigation bar helps me switch between different 360 locations within the application. However, whenever I try to change the 360 image ...

How to Use React JS to Obtain the Full File Path

I am currently using an Input type 'file' to browse files on my machine through a react js application. After selecting the file from my local directory, I would like to obtain the absolute path of the file - for example: C://something/something. ...

The autocomplete feature fails to properly highlight the selected value from the dropdown menu and ends up selecting duplicate values

After working on creating a multiple select search dropdown using MUI, my API data was successfully transformed into the desired format named transformedSubLocationData. https://i.stack.imgur.com/ZrbQq.png 0: {label: 'Dialed Number 1', value: &a ...

Text input in Bootstrap not reaching full width

Trying to achieve a Bootstrap textfield embedded in a panel that spans 100% of the remaining space-width within the panel. However, this is the result obtained: The blue border represents the edge of the panel. Below is the code being used: <div clas ...

Using the for loop to asynchronously fetch data and access the finished result variable

Exploring the world of asynchronous JavaScript, I find myself pondering a question: how can I ensure that my code only starts working on a created array once all queries are completed? My current approach involves fetching pages in a for loop. Here's ...

Template string use in Styled Components causing issues with hover functionality

I have a styled component where I am trying to change the background color when its parent is hovered over. Currently, the hover effect is not working and I'm unsure why. const Wrapper = styled('div')` position: relative; margin-bott ...

How to resolve useState problem in useEffect when state is not null

Encountering issues with maintaining state in TypeScript React. A Child component passes a 'terminal' object to the Parent via a function called returnTerminal(). This 'terminal' object is then stored as a useState variable named _obje ...

Processing file names with Gulp

Is there a way to use the filenames retrieved from gulp.src, create in-memory files based on those names, and then pipe that stream to another destination? For example, I am looking to gather all *.styl files and add each file path to an in-memory file wi ...

Concealing a message within a section that has been minimized to a width of 0

Recently, I've encountered a challenge in attempting to set the width of a section to 0 and have all its contents also disappear. Despite changing the section's width to 0px, the text inside continues to be displayed and even shifts off to the si ...

"Mastering jQuery: A beginner's guide to iterating through tables using

Having trouble with a clock script in jQuery that fails when looping to change the last 2 digits of the time. Currently, only one row is being updated, but I need all rows to update. Here is the code snippet: $(document).ready(function(){ var jam ...

The issue with updating values in the jQuery UI datepicker persists

When using the jquery datepicker ui, you may notice that the value attributes of the associated html fields do not update immediately. For example: http://jsfiddle.net/4tXP4/ Check out this link for more details: http://jqueryui.com/demos/datepicker/al ...

Using jQuery and Bootstrap to Enhance Checkbox Button Styling

I am currently working on an asp.net webform and attempting to style my checkbox similar to the design shown here: When I try to replicate the HTML and JS code from the above link on my page, it does not seem to be functioning properly, most likely due to ...

Effect fails to activate on the third occurrence of the action

After successfully running on the first two action dispatches, the effects fail to trigger on the third time. I have tried the solutions provided in this thread and here, but none of them work for me. Here is the relevant code snippet: @Effect() get ...

CreatePortalLink directs users to a payment URL instead of a dashboard

I am currently working on a project that utilizes the Stripe payments extension in conjunction with Firebase. The application is built using Next JS. After a user subscribes, I want to provide them with a tab where they can manage their subscription. The ...

Obtain the element created by a directive within the controller

I'm currently utilizing the wrapper located at: https://github.com/Yankovsky/nouislider-angular/blob/master/nouislider.js for the nouislider plugin. Within my controller, I aim to access the element that I've created in the template: <div ya ...