getStaticPaths
和 getStaticProps
是 Next.js
中一起使用的两个函数,用于实现动态路由和静态生成页面的数据获取。
1、getStaticPaths
:
- 用途:用于在构建时生成动态路由的路径。
- 返回值:必须返回一个包含 params 键的对象数组,每个对象代表一个动态路由的参数。
- 示例:
export async function getStaticPaths() {
const paths = [
{ params: { id: '1' } },
{ params: { id: '2' } },
];
return { paths, fallback: false };
}
2、getStaticProps
:
- 用途:用于在构建时获取动态路由对应页面的数据。
- 参数:接收一个包含动态路由参数的 params 对象。
- 示例:
export async function getStaticProps({ params }) {
const id = params.id;
// 根据 id 从外部数据源获取数据
return { props: { id } };
}
在使用这两个函数时,getStaticPaths
用于生成动态路由的路径,而 getStaticProps
用于获取动态路由对应页面的数据。通过配合使用这两个函数,可以实现动态路由的静态生成页面,并在构建时获取相应的数据。
请注意,如果您的动态路由参数是在构建时已知的,可以在 getStaticPaths
中指定路径参数;如果参数是不确定的或需要动态获取,可以在 getStaticProps
中根据参数获取数据。
综上所述,getStaticPaths
和 getStaticProps
可以很好地配合使用,实现动态路由的静态生成页面和数据获取。