A while ago, when I was building the first version of Livenormad's blog, we ran into this issue: The blog posts we'd have published do not show up on the route at all unless II trigger a deployment on Vercel.

Doesn't make any sense at all. At first, I thought the issue was somewhat related to Ghost CMS. I was wrong.

This was bound to happen because we're pre-rendering the page with Next.js' getStaticProps at build time. The funny thing about this was that everything works fine on localhost. Hence the reason why the new page/post will be generated whenever we trigger a new deployment/build.

So ideally, here's what we had before.

export async function getStaticProps() {
  const posts = await getPosts();
 
  if (!posts) {
 
    return {
      notFound: true,
    };
  }
 
  return {
    props: { posts },
  };
}

The solution was to tap into Next's Incremental Static Regeneration feature by using the revalidate option to specify how often we want new pages — blog posts in this case — to be generated, if we have new posts.

Now, the previous getStaticProps implementation became this:

export async function getStaticProps() {
  const posts = await getPosts();
 
  if (!posts) {
    return {
      notFound: true,
    };
  }
 
  return {
    props: { posts },
    revalidate: 60,
  };
}

You can play around with how often you want the revalidation to happen by updating the value supplied to revalidate