Having trouble prefetching data in Next.js

Question

I have a simple dummy API that returns an array of objects dummy data such as:

// api/projectsdata.js

    export default function handler(req, res) {
      res.status(200).json([{...},{...},{...}]
    }

My fetch API looks like this:

import { useEffect, useState } from "react";

const ProjectsUtil = () => {
  const [data, setData] = useState(null);

  const fetchData = async () => {
    try {
      const response = await fetch("http://localhost:3000/api/projectsdata");
      const data = await response.json();

      if (response.ok) {
        setData(data);
      }
    } catch (error) {
      throw new Error(error);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  return data !== null && data;
};

export default ProjectsUtil;

I try to fetch using a two helper functions below:

export const getAllProjects = () => {
  const data = ProjectsUtil();
  return data;
};

export const getProjectByName = (name) => {
  const data = getAllProjects();
  return data.filter((project) => project.name === name);
};

In another component I'm trying to prefetch and consume the data such as:

const SingleProjectDetails = (props) => {
  return <ProjectDetails props={props.projectData[0]} />;
};

export function getStaticProps(context) {
  const { params } = context;
  const { id } = params;
  const projectData = getProjectByName(id);

  return {
    props: {
      projectData: projectData,
    },
    revalidate: 600,
  };
}

export function getStaticPaths() {
  const projectsData = getAllProjects();

  return {
    paths: projectsData.map((project) => ({
      params: {
        id: project.name,
      },
    })),
    fallback: true,
  };
}

I get an error: TypeError: Cannot read properties of null (reading 'useState').

The confusing part is that my fetching API functions works fine in other components. Also if I initialize dummy data as a plain array of object and not a call from API, everything works fine. What seems to be a problem? Is prefetching an API not allowed?

You can't use useState/useEffect on a server side call cause thats a react functionality. You can only use javascript in the server side. — Rao Asim
– Rao Asim, Commented Jul 26, 2023 at 6:37

Lav · Accepted Answer · 2023-07-26 04:41:21Z

1

You are calling a Function component inside a regular function. That doesn't work.

Instead, you could extract out the fetchData function into top level function, return the data instead of setting it via a setter and use this fetchData function inside your getAllProjects function.

Don't forget to await the data.

answered Jul 26, 2023 at 4:41

Lav

111 bronze badge

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

2 Comments

Roma Kim Over a year ago

I've tried everything you said. Unfortunately it didn't work. Could you provide a code example? Fetching data might not be a problem since I'm consuming it successfully in other components. The only problem is when I try to pre-fetch it.

Amit 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.

Collectives™ on Stack Overflow

Having trouble prefetching data in Next.js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related