如何清除/删除 NextJs 中的缓存？

Question

我有一个产品页面/products/[slug].js

我对 wordpress/graphql 站点使用增量静态生成：

export async function getStaticProps(context) {

    const {params: { slug }} = context

    const {data} = await client.query(({
        query: PRODUCT_SLUG,
        variables: { slug }
    }));

    return {
        props: {
            categoryName: data?.productCategory?.name ?? '',
            products: data?.productCategory?.products?.nodes ?? []
        },
        revalidate: 1
    }

}

export async function getStaticPaths () {
    const { data } = await client.query({
        query: PRODUCT_SLUGS,
    })

    const pathsData = []

    data?.productCategories?.nodes && data?.productCategories?.nodes.map((productCategory) => {
        if (!isEmpty(productCategory?.slug)) {
            pathsData.push({ params: { slug: productCategory?.slug } })
        }
    })

    return {
        paths: pathsData,
        fallback: true,
    }
}

除了一件事之外，一切都按预期进行。如果我从之前发布的 wordpress 中删除产品，NextJs 会提供缓存页面而不是显示404 - Not found页面，我认为这就是它应该工作的方式，这意味着如果某些内容没有重建，则显示以前的（过时的）页面。

但是，如何才能完全删除已删除且不再从PRODUCT_SLUGS查询中获取的特定产品的缓存呢？

我已阅读这些fallback选项：true, false, blocking但它们似乎都不起作用。

是否有解决方案，无论是next.config.js配置还是其他解决方法？

Answer 1

要清除 Next.js 应用程序中的缓存，请按照以下步骤操作：

1. 停止开发服务器或任何正在运行的 Next.js 进程。
2. 找到 Next.js 项目的根目录。
3. 删除.next目录。您可以使用命令行或文件资源管理器来执行此操作。

信息：删除 .next 目录后，您可以启动 Next.js 开发服务器或重建项目，Next.js 将重新生成必要的缓存和构建工件。请记住，删除 .next 目录将删除所有缓存的数据和构建工件，这意味着 Next.js 将需要重建项目并在下一次构建或服务器启动时重新生成缓存。

Answer 2

所以我遇到了同样的问题，尽管我使用的是 GraphCMS。因此，您需要执行以下操作来修复：

    export async function getStaticProps(context) {
    const {params: { slug }} = context

    const {data} = await client.query(({
        query: PRODUCT_SLUG,
        variables: { slug }
    }));

    if (!data) {
        return {
            notFound: true
        }
    } else {
        return {
            props: {
                categoryName: data?.productCategory?.name ?? '',
                products: data?.productCategory?.products?.nodes ?? []
            },
            revalidate: 1
        }
    }
}

您需要notFound: true返回getStaticProps

notFound- 可选的布尔值，允许页面返回 404 状态和页面。

请参阅文档中的此页面https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static- Generation

然后在getStaticPaths更改后备到fallback: "blocking". 如果保留，fallback: true它将为构建成功后的过时页面提供服务。