Next.js getStaticProps not returning data

Question

I am creating a blog in Next.js and using Strapi headless CMS as backend.

I was trying to get data from the API I made from Strapi.

For fetching data I made ./client.js

export default class StrapiClient{
constructor(){}
/*API_URL = "http://localhost:1337/api/"*/
async fetchData(path){
   const url = `${process.env.API_URL}${path}`
   const res = await fetch(url)
   const posts = await res.json()

  return posts
}}

and imported it to ./components/blog.js

import StrapiClient from '../client'

const Client = new StrapiClient

export const getStaticProps = async () => {
const posts = await Client.fetchData(`articles`)

return{
  props: {
    posts,
  }
    }
};

  const Blog = ({posts}) => {



  return (
    <div>
   
          {posts.data.map((element) => {
            return(
              <div key={element.id}>
                <h1 className=" text-2xl">{element.attributes.title}</h1>
              </div>
            )
          })}
        
    </div>
  );

};

export default Blog;

but I got error

TypeError: Cannot read properties of undefined (reading 'data')

and here is the structure of data I was using

 { 
      "data" : [
       "id" /*string*/
    ]

 }

`getStaticProps` can only be used inside page components (components under the `pages` folder). It won't work when called in other components. — juliomalves, Feb 16 '22 at 12:15

Shri Hari L · Accepted Answer · 2022-02-16T11:53:50.857

1

You need to await the async function to get data from Promise

export const getStaticProps = async () => {
 const posts = await Client.fetchData(`articles`)
 return{
  props: {
    posts,
  }
 }
};

Async functions always return a promise

Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

edited Feb 16 '22 at 11:53

answered Feb 16 '22 at 11:23

Shri Hari L

4,551
2
6
18

It is still showing the error and I have updated the code – Shivam Mishra Feb 16 '22 at 11:46
As @Tauqeer Nasir mentioned, it should be `getStaticProps` – Shri Hari L Feb 16 '22 at 12:13
Its still showing the error – Shivam Mishra Feb 16 '22 at 12:16

Tauqeer Nasir · Answer 2 · 2022-02-16T11:49:59.140

1

const posts = Client.fetchData(`articles`)

I think you need to await for the fetchData.

Edit:

I just noticed you are using getStaticPaths function instead of getStaticProps. Can you please change the name and try again?

edited Feb 16 '22 at 11:49

answered Feb 16 '22 at 11:25

Tauqeer Nasir

157
5

its still showing the error and I have updated code – Shivam Mishra Feb 16 '22 at 11:46
@ShivamMishra I edited the answer, you have wrong function name. – Tauqeer Nasir Feb 16 '22 at 11:50
I also changed getStaticPaths to getStaticProps but this doesn't solve the problem – Shivam Mishra Feb 16 '22 at 12:13

score 1 · Answer 3 · answered Feb 16 '22 at 12:03

From next.js documentation the getStaticPaths method is used to define a list of paths to be statically generated but to fetch data for page you need to use getStaticProps:

export async function getStaticProps() {
  const posts = await Client.fetchData(`articles`);

  return {
    props: {
      posts,
    },
  }
}

Or fetch data using getServerSideProps without use getStaticPaths:

export async function getServerSideProps() {
  const posts = await Client.fetchData(`articles`);
  return { props: { posts } }
}

Next.js getStaticProps not returning data

3 Answers3

Linked