Next.js 14+无法展示从Strapi获取的数据问题求助

我用Strapi和Next.js 14+开发，Postman能正常调用Strapi API拿到数据，但Next.js应用里就是展示不出来。

我的代码（post/[slug]/page.js） #

const getPost = async (id) => {
  const data = await fetch(`http://127.0.0.1:1337/api/posts?filters[Permalink][$eq]=${id}`);
  const post = await data.json();

  return post;
};


/*export const generateStaticParams = async () => {
    const data = await fetch("http://127.0.0.1:1337/api/posts")
    // const data = await fetch("http://127.0.0.1:1337/api/posts?filters[Permalink][$eq]=my-first-post")
    const posts = await data.json()
  
    return posts.data.map(post => ({
      params: {
        slug: post.attributes.permalink
      }
      
    }))
  }*/


  export default async function Home({ params: { slug } }) {

    const post = await getPost(slug)

    
    return (
        <>

        <div id={post.id}></div>
        
        
        <ul>
        {post.data.map(item => (
            <>
            <li key={item.id}>{item.attributes.Title}</li>
            </>
        ))}
        </ul>


        </>
    )
}

Strapi API返回数据（Postman调用结果） #

{
    "data": [
        {
            "id": 2,
            "attributes": {
                "Title": "My Second Post",
                "Meta_Description": "Some Description",
                "Content": "Some Text",
                "createdAt": "2023-11-27T14:42:07.787Z",
                "updatedAt": "2023-11-27T14:50:16.707Z",
                "publishedAt": "2023-11-27T14:42:29.807Z",
                "Block_editor": null,
                "Permalink": "my-second-post"
            }
        }
    ],
    "meta": {
        "pagination": {
            "page": 1,
            "pageSize": 25,
            "pageCount": 1,
            "total": 1
        }
    }
}

补充信息 #

• 用第三方测试API替换后代码能正常运行
• 使用的是Next.js的APP目录

1. 修正无效的DOM属性取值 #

Strapi返回的根对象里没有id字段，你代码里的<div id={post.id}></div>会取到undefined，可能引发渲染错误，直接删除该行或改为正确的取值逻辑。

2. 检查Strapi权限配置 #

Postman能调用但Next.js不行，大概率是公共角色权限未开启：

• 进入Strapi后台，打开设置→角色与权限→公共角色，确保posts的find权限已勾选保存。

3. 配置跨域规则 #

在Strapi的config/middlewares.js中修改cors配置，允许Next.js的本地开发域名：

module.exports = [
  // 其他中间件
  {
    name: 'strapi::cors',
    config: {
      origin: ['http://localhost:3000'],
      methods: ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'HEAD', 'OPTIONS'],
      credentials: true,
    },
  },
  // 其他中间件
];

4. 修复generateStaticParams的字段大小写问题 #

取消generateStaticParams的注释，注意Strapi返回的字段是Permalink（首字母大写），代码里要保持一致：

export const generateStaticParams = async () => {
    const data = await fetch("http://127.0.0.1:1337/api/posts")
    const posts = await data.json()
  
    return posts.data.map(post => ({
      params: {
        slug: post.attributes.Permalink
      }
    }))
}

5. 可选：禁用fetch缓存（避免数据不同步） #

Next.js APP目录的fetch默认缓存数据，添加cache: 'no-store'确保每次请求都拉取最新数据：

const getPost = async (id) => {
  const data = await fetch(`http://127.0.0.1:1337/api/posts?filters[Permalink][$eq]=${id}`, {
    cache: 'no-store'
  });
  const post = await data.json();

  return post;
};

最终修正后的代码 #

const getPost = async (id) => {
  const data = await fetch(`http://127.0.0.1:1337/api/posts?filters[Permalink][$eq]=${id}`, {
    cache: 'no-store'
  });
  const post = await data.json();

  return post;
};

export const generateStaticParams = async () => {
    const data = await fetch("http://127.0.0.1:1337/api/posts")
    const posts = await data.json()
  
    return posts.data.map(post => ({
      params: {
        slug: post.attributes.Permalink
      }
    }))
}

export default async function Home({ params: { slug } }) {
  const post = await getPost(slug)

  // 处理数据为空的边界情况
  if (!post.data || post.data.length === 0) {
    return <div>文章不存在</div>
  }

  return (
    <>
      <ul>
        {post.data.map(item => (
          <li key={item.id}>{item.attributes.Title}</li>
        ))}
      </ul>
    </>
  )
}

内容的提问来源于stack exchange，提问作者Owaiz Yusufi