在Next.js中,getStaticPaths() 内部可以返回一个包含多个路径参数的数组。下面是一个示例代码:
// pages/[slug].js
export async function getStaticPaths() {
// 这里可以从数据库或其他数据源中获取所有可能的路径参数
const paths = [
{ params: { slug: 'post-1' } },
{ params: { slug: 'post-2' } },
{ params: { slug: 'post-3' } }
];
return {
paths,
fallback: false // 设置为 false,未匹配到的路径将返回 404 页面
};
}
export async function getStaticProps({ params }) {
// 根据路径参数获取页面的数据
const postData = await fetch(`https://api.example.com/posts/${params.slug}`);
const post = await postData.json();
return {
props: {
post
}
};
}
export default function Post({ post }) {
return (
{post.title}
{post.content}
);
}
在上述示例中,getStaticPaths() 返回一个包含三个路径参数的数组。每个路径参数都是一个对象,其中 params 属性指定了路径参数的值。
在 getStaticProps() 中,我们可以通过 params.slug 获取到当前页面的路径参数,并使用它来获取相应的数据。
这样,当用户访问 /post-1、/post-2 或 /post-3 等路径时,Next.js 会根据路径参数来动态生成对应的页面,并将获取到的数据传递给 Post 组件进行渲染。