一起来学 next.js - getStaticProps、getStaticPaths 篇

之前讲过 next.js 中的 getServerSideProps，今天来讲一讲另一个很类似的 API：getStaticProps，以及和 getStaticProps 紧密相关的 getStaticPaths。

getStaticProps 主要用于构建时落地一些静态数据，但不同于 getServerSideProps，getStaticProps 默认情况下只会在构建时执行一次，之后的每次请求都会使用构建时的数据。在 ISR、SSG 等场景下还有不同的表现。

而 getStaticPaths 则用于配合 getServerSideProps 实现动态路由的构建，next.js 会在构建时根据 getStaticPaths 的返回值来生成对应的静态页面。

使用

先看下 getStaticProps 如何使用，其实和 getServerSideProps 用法差不多：

export default function GetStaticProps({ content }: { content: string }) {return (<div><header>getStaticProps</header><main>{content}</main></div>);
}

export const getStaticProps = async () => {const content = 'Hello World';console.log('call getStaticProps');return {props: {content}};
}; 

只需要在 page 中导出 getStaticProps 函数，然后在函数中返回 props 即可。在 page 渲染组件中就可以直接通过 props 即可获得数据。

调用时机

再来看下 getStaticProps 的调用时机，这里和 getServerSideProps 存在很大差异：

• 当执行 next build 时
• 当 getStaticPaths 返回