NextJs - 关于功能组件中数据获取的问题

Question

我是打字稿和 NextJs 的新手。我对此代码有疑问


const Home: NextPage = ({characters}:any) => {  
return (      
  <div>          
    {JSON.stringify(characters)}        
 </div>  
)}

export const getStaticProps:GetStaticProps = async(context)=>{  
const res = await fetch("https://rickandmortyapi.com/api/character")  
const { results } = await res.json();  
return{    
      props:{      
            characters: results   }  }}


export default Home

const getStaticPropsreturns一个object prop，它是如何进入Home的？我没看到家里叫它

Home: NextPage = ({characters}:any) 它需要 any 个字符 object。它怎么知道 prop 是从中读取的？

Answer 1

来自 Next.js docs:

Exporting a function called getStaticProps will pre-render a page at build time using the props returned from the function

这些只能在页面组件上声明，因此，在build-time每个页面只能有这些功能之一，如果有，它将执行并将道具发送到页面组件.

NextJs - 关于功能组件中数据获取的问题

NextJs - question on data fetching in a functional component

typescript

types

next.js

fetch

react-functional-component