Next.js的静态生成（Static Generation）是一种在构建阶段生成静态HTML页面的渲染模式，getStaticProps是这种模式下的核心数据获取函数，它只在构建时运行，不会在客户端执行，获取到的数据会作为props传递给对应的页面组件，最终生成包含完整数据的静态页面。
getStaticProps的基本用法
getStaticProps是一个异步函数，需要导出到页面组件的模块中，函数内部可以执行任何服务端可运行的逻辑，比如读取本地文件、调用接口、查询数据库等，最终返回一个包含props属性的对象，这个props会被传递给同模块的页面组件。
以下是一个基础的示例，在pages/posts.js页面中使用getStaticProps获取文章列表数据：
// pages/posts.js
export async function getStaticProps() {
// 模拟获取文章数据，实际场景可以是调用API、查询数据库等
const posts = [
{ id: 1, title: 'Next.js入门指南', content: 'Next.js是React生态的主流框架' },
{ id: 2, title: '静态生成原理', content: '静态生成在构建时生成HTML页面' }
];
// 返回的数据会作为props传递给页面组件
return {
props: {
posts
},
// 可选配置，设置页面重新生成的间隔秒数，开启增量静态再生
revalidate: 60
};
}
// 页面组件，接收getStaticProps返回的props
export default function PostsPage({ posts }) {
return (
<div>
<h1>文章列表</h1>
<ul>
{posts.map(post => (
<li key={post.id}>
<h3>{post.title}</h3>
<p>{post.content}</p>
</li>
))}
</ul>
</div>
);
}
getStaticProps的执行时机与限制
getStaticProps只在构建阶段执行，不会出现在客户端的打包代码中，因此它内部可以使用Node.js的相关API，比如fs模块读取本地文件，或者调用需要服务端密钥的接口，这些逻辑不会暴露给客户端。
需要注意的是，getStaticProps只能用在页面组件中，也就是pages目录下的文件，不能用在普通组件里。如果普通组件需要数据，需要在页面组件中获取后通过props传递下去。
如果页面使用了动态路由，比如pages/posts/[id].js，还需要配合getStaticPaths函数使用，先定义需要生成的动态路由参数，再在getStaticProps中根据参数获取对应数据。
数据传递到页面组件的完整流程
getStaticProps到页面组件的数据传递可以分为以下几个步骤：
- Next.js在构建阶段执行页面模块的getStaticProps函数，获取返回的数据对象
- 将返回对象中的props属性作为实参，传递给同模块的默认导出的页面组件
- 页面组件接收props后，在渲染逻辑中使用这些数据，生成完整的HTML内容
- 构建完成后，生成的静态HTML页面已经包含了完整的props数据，用户访问时直接返回预渲染好的页面
不同数据获取方式的对比
Next.js提供了多种数据获取方式，getStaticProps和其他方式的差异如下：
| 数据获取方式 | 执行时机 | 适用场景 |
|---|---|---|
| getStaticProps | 构建阶段（开启增量再生后也会在请求时重新生成） | 数据不频繁变化、面向所有用户的静态页面 |
| getServerSideProps | 每次请求时服务端执行 | 数据实时性强、需要请求时动态计算的页面 |
| useEffect客户端获取 | 客户端组件挂载后执行 | 非首屏必须的用户个性化数据 |
常见问题与注意事项
首先，getStaticProps返回的数据必须是可序列化的，因为Next.js需要把数据序列化后注入到静态页面的HTML中，因此不能返回函数、Date对象（会被序列化为字符串）、自定义类的实例等不可序列化的内容。
其次，如果开启了revalidate增量静态再生配置，页面在第一次请求超过revalidate设置的时间后，会触发后台重新生成页面，新的请求会返回更新后的静态页面，这个过程中getStaticProps会再次执行获取最新数据。
最后，getStaticProps中不能直接使用浏览器端的API，比如window、document等，因为它运行在服务端环境，这些API不存在，直接使用会导致构建报错。
Next.jsgetStaticProps静态生成数据传递页面组件修改时间：2026-06-13 01:12:15