generateStaticParams

generateStaticParams 函数在构建时会生成静态路由，而不是在请求时按需生成路由。

可能有人会问，使用 generateStaticParams 函数有什么好处？

• 由于在构建构建阶段就生成了静态路由，所以可以使用缓存，提升页面加载速度。
• 同时，相比于动态路由，静态路由可以提升路由匹配的效率。

单个路由段

app/blog/[slug]/layout.js

export async function generateStaticParams() {
    const posts = await fetch('https://.../posts').then((res) => res.json())
    
    return posts.map((post) => ({
        slug: post.slug,
    }))
}

export default function Layout({ params }) {
    const { slug } = params
}

嵌套路由段

app/products/[category]/[product].js

export function generateStaticParams() {
  return [
    { category: 'a', product: '1' },
    { category: 'b', product: '2' },
    { category: 'c', product: '3' },
  ]
}

// - /products/a/1
// - /products/b/2
// - /products/c/3
export default function Page({params}) {
    const { category, product } = params
    // ...
}