Can'；t将数据从Strapi API提取到next.js前端

我尝试了strapi和next.js来创建一个博客网站。下面是next.js的前端代码

从“下一个/头部”导入头部
从“../styles/Home.module.css”导入样式
导出默认函数Home（{posts}）{
返回(
{职位&&
posts.map（（posts）=>(
{posts.title}
))}
);
}
导出异步函数getstaticProps（）{
//从我们的API获取帖子
const res=等待获取（“http://localhost:1337/posts");
const posts=wait res.json（）；
返回{
道具：{posts}，
};
}

getstaticProps

应该在不同的情况下->

getstaticProps

，不同的是您的代码看起来很好。

如果您使用的是Next.js，并且希望充分利用静态渲染，我建议尽可能避免使用getstaticProps

下面是一个使用纯组件而不使用道具的工作示例

const Home = () => {
  const [posts, setPosts] = React.useState(null);

  const getPosts = async() => {
    const res = await fetch("http://localhost:1337/posts");
    const json = await res.json();
    setPosts(json);
  }

  if(!posts){
    getPosts();
  }

  return (
    <div>
      {posts ? posts.map((post) => (
        <div key={post.title}>
            <h2>{post.title}</h2>
        </div>
      )) : (
        <div>Loading...</div>
      )}
    </div>
  )
}

export default Home;

const Home=（）=>{
const[posts，setPosts]=React.useState（null）；
const getPosts=async（）=>{
const res=等待获取（“http://localhost:1337/posts");
const json=await res.json（）；
setPosts（json）；
}
如果（！帖子）{
getPosts（）；
}
返回(
{posts？posts.map（（post）=>(
{post.title}
)) : (
加载。。。
)}
)
}
导出默认主页；

代码清晰，解释得很好，谢谢