Removing static page in NextJS when that page is deleted on CMS

[M1ck0]

Let's say that I have a blog with 10 pages. Headless CMS with WordPress and all pages are statically generated using getStaticPaths and getStaticProps, with revalidate option.

Now when I delete a post in WordPress, that page on the Front-end is not deleted.

Is it possible for a static page to be removed when a blog post on WordPress is deleted?

[M1ck0]

Anyone?

[SamiSousa]

I just came across this myself. I originally assumed that using revalidate would cause getStaticProps to refetch data and regenerate a given page periodically, but I'm not seeing pages even update even though I'm setting revalidate on every page's getStaticProps. Some guidance would be appreciated

Edit:
My issue was that revalidate needed to be an integer, and was being entered as a string via the environment.
For static pages on wildcard pages like [slug].js, if fallback is set to true in getStaticPaths I found that a page that exists is deleted when the WordPress page is deleted.

[brendanmckenzie]

I am experiencing a similar problem.

• I have revalidate: 5 set on my dynamic route.
• On the initial build the page in question is not published in the CMS and I receive a 404 (expected)
• I publish that page in my CMS it's then rendered correctly (expected)
• I then unpublish my page in the CMS and wait at least 5 seconds (or minutes, or hours) and the page remains (unexpected)

In getStaticProps I am returning notFound: true for those pages that aren't published.

In dev mode (yarn dev) it works as expected. I'm experiencing the issue when hosted on Vercel.

[florianzemma]

I've got a similar issue :

• At the build time if my page is Offline in my back office nextjs show the 404 page , but I can't make this page online , even if she is online in my back office, next will show the 404 page.

• At the build time if my page is Online in my back office next render properly the page , I can make the page Offline and Online as I want and it's working properly on the nextjs side.

export const getStaticProps : GetStaticProps = async ({params}) => {
   const menu = await getMenuHtml();
   const { data } = await apolloClient.query({
     query: GET_PROFESSION_BY_SLUG,
     variables: { slug: params!.slug},
     fetchPolicy : "network-only"
   })
   
   if(!data?.getProfessionBySlug?.isValid){
     return { notFound : true }
   } 

   const profession = data?.getProfessionBySlug;
   // Pass post data to the page via props
   return {revalidate : 2, props: { profession , menu }, notFound : false }
 }

[brendanmckenzie]

Do you include a revalidate value for your notFound response?

[florianzemma]

Hi ! thank you for your answer.

I tried with { notFound : true, revalidate : 2 } after your comment but I've got the same behaviour if the page is Offline at build time I can't make this page online the 404 page is always showing.

I'm using it with fallback : 'blocking' on the getStaticPath.

[omrirz]

@florianzemma have you found a solution?

[EliseiNicolae]

@M1ck0 have you found a solution?

[choutkamartin]

The solution was already written. You have to call a revalidate function with a slug or page ID of the page you want to "delete". That way, when you run the revalidate function, Next.js will try to fetch the page data from some CMS, and if the CMS returns null (because the page data are not present in the CMS), Next.js will return a 404 (notFound: true).

export const getStaticProps = async (ctx) => {
  const { params = {} } = ctx;

  const page = await getPage(params.slug);
  if (!page) {
    return {
      notFound: true,
    };
  }

  return {
    props: {
      page,
    },
  };
};

[omrirz]

The problem with that solution is I need to have "revalidate: 1" or something like that, I don't want to keep refetching all the pages all the time.