Challenges with fetching data from APIs in NextJs

Question

Challenges with fetching data from APIs in NextJs

I am currently working on a basic NextJs TypeScript application with the app router.

The following code is functioning correctly:

export default async function Page() {
  const res = await fetch("https://api.github.com/repos/vercel/next.js");
  const data = await res.json();

  return (
    <>
      <div>Hello from GetData</div>
      <div>
        <p>{data.id}</p>
      </div>
    </>
  );
}

However, changing the API URL to the following stops it from working:

https://jsonplaceholder.typicode.com/posts/1 or any other API such as and https://jsonplaceholder.typicode.com/users

Moreover, I have implemented types for the endpoints to receive an array in response.

type User = {
  id: number;
  name: string;
};
const data: User[] = await res.json();

https://i.stack.imgur.com/uDWEs.png

Console error encountered:

https://i.stack.imgur.com/8dlTA.png

Browser error shown:

javascript next.js fetch

Answer 1

Answer №1

When working with React/Next, it's important to remember that components are not inherently designed to be asynchronous. While it is possible to turn a functional component into an asynchronous function, it may not behave as expected. React anticipates components to return JSX synchronously, so utilizing asynchronous functions can lead to unexpected behavior. It's unclear how the provided code functions in the initial scenario, and based on what I know, it shouldn't work as intended.

If you need to fetch data using a functional component, consider employing the useEffect hook along with asynchronous functions:

export default async function Page() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch("https://jsonplaceholder.typicode.com/users/1");
        const data = await response.json();
        setData(data);
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    };

    fetchData();
  }, []);

  return (
    <>
      <div>Hello from GetData</div>
      {data && (
        <div>
          <p>{data.id}</p>
        </div>
      )}
    </>
  );
}

Answer 2

When working with React/Next, it's important to remember that components are not inherently designed to be asynchronous. While it is possible to turn a functional component into an asynchronous function, it may not behave as expected. React anticipates components to return JSX synchronously, so utilizing asynchronous functions can lead to unexpected behavior. It's unclear how the provided code functions in the initial scenario, and based on what I know, it shouldn't work as intended.

If you need to fetch data using a functional component, consider employing the useEffect hook along with asynchronous functions:

export default async function Page() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch("https://jsonplaceholder.typicode.com/users/1");
        const data = await response.json();
        setData(data);
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    };

    fetchData();
  }, []);

  return (
    <>
      <div>Hello from GetData</div>
      {data && (
        <div>
          <p>{data.id}</p>
        </div>
      )}
    </>
  );
}

Challenges with fetching data from APIs in NextJs

Answer №1

Similar questions

Is it possible to use JavaScript to click on a particular point or element within a canvas?

"Contrasting the Execution of a JavaScript Function in a .js File Versus an HTML

Is it possible to center the image and resize it even when the window is resized?

Automatically generated list items are failing to react to the active class

Upon calling the method, an undesirable page refresh occurs

Scrapy-splash seems to be encountering difficulties in extracting elements during the scraping process

Using javascript to generate fresh dictionaries

What is the method for assigning a value to a JSON object using data from another JSON object?

jQuery Modal activated only once upon clicking

In internet explorer with AJAX, the UI is refreshed by Javascript only when an alert() function is triggered

Unlocking $refs with the Composition API in Vue3 - A step-by-step guide

A guide to resizing images in Node.js prior to using the writeFile function

I encountered a validation error and a 404 error while trying to input data into all fields. Kindly review and check for accuracy. Additionally, I have included an

The initial res.body object in NodeJS is enclosed in quotation marks

Timeout for jQuery animations

What is the best method for retrieving data from a specific collection in MongoDB?

Error caused by live data dynamic update on Highstock chart: Cannot access property 'info' of undefined

JavaScript allows for inserting one HTML tag into another by using the `appendChild()` method. This method

An issue has occurred on the server: The response.status function is not recognized as a valid function

Trouble linking JavaScript and CSS files in an Express App