Why is my Next.js Route infinite loading?-CodePudding

I am trying to setup a Next.js simple blog with Strapi.

I am trying to setup dynamic routing so when a user gots to localhost:3000/blog/blog-name, it will get the correct data and render it. But so far, all my application does is infinite load and I cannot figure out why. I can't even see any errors in the console because of the infinite loading.

I am trying to access Blog Id 1 for example. If I hit the endpoint localhost:1337/api/blogs/1, I get the following response:

{
"data": {
"id": 1,
"attributes": {
"title": "Testing Blog",
"slug": "testing-blog",
"createdAt": "2023-02-03T17:03:30.626Z",
"updatedAt": "2023-02-03T17:03:32.666Z",
"publishedAt": "2023-02-03T17:03:32.664Z"
}
},
"meta": {}
}

If I hit localhost:1337/api/blogs, I get the following:

{
"data": [
{
"id": 1,
"attributes": {
"title": "Testing Blog",
"slug": "testing-blog",
"createdAt": "2023-02-03T17:03:30.626Z",
"updatedAt": "2023-02-03T17:03:32.666Z",
"publishedAt": "2023-02-03T17:03:32.664Z"
}
},
{
"id": 2,
"attributes": {
"title": "Testing Blog 2",
"slug": "testing-blog-2",
"createdAt": "2023-02-03T17:16:40.923Z",
"updatedAt": "2023-02-03T17:16:41.387Z",
"publishedAt": "2023-02-03T17:16:41.385Z"
}
}
],
"meta": {
"pagination": {
"page": 1,
"pageSize": 25,
"pageCount": 1,
"total": 2
}
}
}

Here is my code

file: /pages/blog/[slug].js

code:

import axios from "axios";

import React, { useEffect } from "react";

const Blog = (props) => {
  return (
    <>
      <h1>TESTING</h1>
    </>
  );
};

export async function getStaticProps({ params }) {
  const res = await axios.get(`http://localhost:1337/api/blogs/1`);

  return {
    props: {
      content: res.data.data,
    },
  };
}

export async function getStaticPaths() {
  const res = await axios.get("http://localhost:1337/api/blog");
  const blogs = res.data.data;
  console.log("blogs", blogs);

  const paths = blogs.map((blog) => {
    return {
      params: {
        id: blog.id,
      },
    };
  });

  return {
    paths,
    fallback: true,
  };
}

export default Blog;

CodePudding user response：

At a glance that looks correct. If you add console logs to getStaticProps and getStaticPaths you'll see them at build time.

You should see getStaticPaths called once, then getStaticProps called once for each path returned by getStaticProps.

If your page is infinitely loading, look at that page's react component. Try just simplifying it down to console.log the props you get, and 'hello world'.

You're probably have a useEffect (or other hook) with a dependency on state that gets updated within that hook causing the infinite loop.

CodePudding user response：

first of all set reactStrictMode to true in your next.config.js file to prevent infinite renders :

module.exports = {
  reactStrictMode: true,
};

then verify inside your useEffect, you are most probably updating a hook that is part of the dependency array and it should be an object or an array something like this :

const [test, setTest] = useState({}); // maybe an array
//...
useEffect(() => {
  //...
  const newValue = {first: "valueOfFirst", second: "valueOfSecond"};
  setTest(newValue);
}, [test]);

this will lead to an infinite render since two objects or two arrays are always not equals. if it's the case, one way to fix it is to compare the JSON.stringify of the prev value and the next one :

setTest((prev) => {
  if (!JSON.stringify(prev) === JSON.stringify(newValue)) return newValue;
});