In my index page like this:

function Index({posts}) {
    console.log(posts);
    return (
        <div>
            Homepage
            {/* {posts && posts.length > 0 && posts.map(post => <h1 key={post._id}>{ post.title}</h1>)} */}
        </div>

    )
}

Index.getInitialProps = async ctx => {
  try {
        const res = await axios({
            method: "GET",
            url: 'https://jsonplaceholder.typicode.com/posts'
        })
      return {posts: res.data}
      
    } catch (error) {
      return  {errorLoading: true}
    }
}

export default Index;

console.log(res.data) work successfully. But I only get console.log(posts) undefined. why?