NextJs 动态页面中未加载动态内容

Question

目前，我的 Strapi CMS 中有一个博客集合类型，其中包含一个 ID 和标题数据字段。我在前端使用 NextJs 为每个博客页面动态加载博客内容。但是当我的动态页面加载时，我的内容没有加载。

存储个人博客的页面：

{posts &&
        posts.map((item, idx) => (
          <Link href={`/BlogPage/${item.id}`}>
            <div>
              <img src={`http://localhost:1337${item.Thumbnail.url}`}/>
            </div>
          </Link>

然后在我的 BlogPage 目录中我有一个文件 [id].js:

export default function name({blog}) {
    return (
      <>     
      <div>
        {blog.Title}
      </div>
</>
)}
// Tell nextjs how many pages are there
export async function getStaticPaths() {
  const res = await fetch("http://localhost:1337/blogs");
  const posts = await res.json();

  const paths = posts.map((blog) => ({
    params: { id: blog.id.toString() },
  }));

  return {
    paths,
    fallback: false,
  };
}

// Get data for each individual page
export async function getStaticProps({ params }) {
  const { id } = params;

  const res = await fetch(`http://localhost:1337/blogs?id=${id}`);
  const data = await res.json();
  const posts = data[0];

  return {
    props: { posts },
  };
}

这会将我带到这个 URL http://localhost:3000/BlogPage/1 并给我一个错误

TypeError: 无法读取未定义的属性“标题”

Answer 1

尝试出name函数的getStaticProps和getStaticPaths

export async function getStaticPaths() {
  const res = await fetch("http://localhost:1337/blogs");
  const posts = await res.json();

  const paths = posts.map((blog) => ({
    params: { id: blog.id.toString() },
  }));

  return {
    paths,
    fallback: false,
  };
}


export async function getStaticProps({ params }) {
  const { id } = params;

  const res = await fetch(`http://localhost:1337/blogs?id=${id}`);
  const data = await res.json();
  const posts = data[0];

  return {
    props: { posts },
  };
}

export default function name({posts }) { // change this line
    return (
      <>     
      <div>
        {posts.Title} // change this line // Are you sure is it Title? not title? if it is with lowercase, it will return null
      </div>
     </>
    )
}