I am using Strapi with Next.js for my blog project

I am trying to make dynamic pages by using [id].js inside pages/posts/[id].js

But, the problem is when I try to map through the API of Strapi inside getStaticPaths() it gives me an error with data.map is not defined

Note:- I am using NextJS V12.0.8 with Strapi V4.0.4

Below is my code

export async function getStaticPaths() {
  const postsRes = await axios.get("http://localhost:1337/api/posts?populate=image");
 
  const paths = postsRes.map((post) => {
    return { params: {id: post.id.toString()} }
  });

  // const paths = { params: {id: '1' } }
    
  return {
    paths,
    fallback: false
 
  }
 
}

Complete [id].js Page Code Link -

Error Screenshot -

I am using Strapi with Next.js for my blog project

I am trying to make dynamic pages by using [id].js inside pages/posts/[id].js

But, the problem is when I try to map through the API of Strapi inside getStaticPaths() it gives me an error with data.map is not defined

Note:- I am using NextJS V12.0.8 with Strapi V4.0.4

Below is my code

export async function getStaticPaths() {
  const postsRes = await axios.get("http://localhost:1337/api/posts?populate=image");
 
  const paths = postsRes.map((post) => {
    return { params: {id: post.id.toString()} }
  });

  // const paths = { params: {id: '1' } }
    
  return {
    paths,
    fallback: false
 
  }
 
}

Complete [id].js Page Code Link - https://pastebin.com/SnzLirys

Error Screenshot - https://prnt.sc/26ha6z5

• javascript
• axios
• next.js
• strapi

• Did you mean to call postsRes.data.map() instead? – juliomalves Commented Jan 22, 2022 at 12:39
• did you try looking at the docs? axios.get returns a Response object. The data you are looking for can be found at postsRes.data – derpirscher Commented Jan 22, 2022 at 12:53
• @juliomalves Thanks for your replay, Yes I have also tried it but still it gives the same error ---- > prnt.sc/26hh5pa – Owaiz Yusufi Commented Jan 22, 2022 at 13:56
• @derpirscher Yes I know that it returns an object response as I have made my blog front page using axios ----> prnt.sc/26hh75z – Owaiz Yusufi Commented Jan 22, 2022 at 13:57
• 1 well, then postRes.data is not an array but nobody can help you beyond that point, because we don't know what postRes.data really is ... – derpirscher Commented Jan 22, 2022 at 14:08

1 Answer 1

All you needed to do is restart the npm run dev by pressing ctrl + c then re running the dev