微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

我是否需要在 Next.JS 应用程序的每个文件中使用 getStaticPaths?

如何解决我是否需要在 Next.JS 应用程序的每个文件中使用 getStaticPaths?

我正在制作 Next.JS 静态电子商务网站。

我有一个单独的产品页面/products/[id] 路径,所以在 [id].js 文件我有 getStaticPaths 函数,它为我的所有产品创建页面。所以没关系。

现在我正在为我的产品(如裤子、T 恤等)制作系列,所以我做了 /categories/[category] 路径。在 [category].js 中,我想显示特定系列的所有产品。

现在是一个问题! [category.js] 中静态呈现的产品是否需要 getStaticPaths 函数,或者我可以在 getStaticProps 中获取它们并在页面上使用?

我写了一些运行良好的代码,但我不知道它是否正确。代码如下。

首先我调用 getStaticPaths 为每个集合(类别)生成单独的页面

export async function getStaticPaths() {
    await dbConnect()

    const categories = await CategoryModel.find({})

    const paths = categories.map((doc) => {
        const category = doc.toObject()
        return {
            // !!! categories finds by name (not slug or id)
            params: { category: category.name }
        }
    })

此外,我使用 getStaticProps 来获取特定的集合(类别)和产品。

export async function getStaticProps({ params }) {
    await dbConnect()

    const category = await CategoryModel.findOne({ name: params.category }).lean()
    category._id = category._id.toString()
    
    const productsData = await ProductModel.find({categories: `/${params.category}`})
    const products = productsData.map((doc) => {
        const product = doc.toObject()
        product._id = product._id.toString()
        return product
    })

    // revalidate set the time (in sec) of re-generate page (it imitate SSR)
    return { props: { category,products },revalidate: 120 }
}

所以这里我没有对产品使用 getStaticPaths,因为我在 products/[id].js 中创建了它们。方法正确吗?

提前致谢!

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。