Question

我正在制作我的第一个Nextjs项目，这是一个使用JSON占位符API的简单博客。由于某些原因，我不断收到错误消息，即我的道具帖子未定义，有人可以帮我吗？

我尝试console.log（）我的帖子，但是我使结果变得不确定

代码

import React from 'react'
import { GetStaticProps } from 'next'

import headerStyles from '../styles/header.module.css'

interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}

interface IProps {
  posts: Post[];
}


export const getStaticProps: GetStaticProps = async () => {

  const res = await fetch('https://jsonplaceholder.typicode.com/posts')
  const posts = await res.json()

  return {
    props: {
      posts,
    }
  }
}

const Header: React.FC = () => {
  return (
    <div className={headerStyles.container}>
      <h1 className={headerStyles.heading}>My Blog</h1>
    </div>
  )
}


const Home: React.FC<IProps> = ({ posts }) => {

  console.log(posts)

  return (
    <>
    <Header />
     {posts.map(post => (
        <div key={post.id}>
          <h1> {post.title} </h1>
          <button>Go to post</button>
        </div>
      ))}
    </>
  )
}

export default Home

Answer 1

在您所处的情况下，它仅在构建后才起作用，因此，如果需要检查一些没有它的东西，则必须使用getInitialProps

在Nextjs中使用getStaticProps

1 个答案: