getStaticPaths - data.map 不是 function

Question

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

Answer 1

Somehow axios is the problem. For next generations - try get data with fetch instead of axios, in my case it works.

Answer 2

apparently you need to set up a context to use axios inside that function, or you can try to format the axios response to json.stringfy and then use json.parse in it. or just use fetch.

in case you are using next api folder, don't call fetch or axios here, just make the query as if you were in node

export async function getStaticPaths() {
      const get = await fetch("url")
      const data = await get.json()
      
      data.map(item => console.log(item))
     
      const paths = data.map((post) => {
        return { params: {id: post.id.toString()} }
      });
    
      // const paths = { params: {id: '1' } }
        
      return {
        paths,
        fallback: false
     
      }
     
    }