Next.js dynamic pages do not update

Question

We built a simple blog using Next.js and noticed that none of the changes we're making on the CMS (headless wordpress) are reflected on the dynamic pages. For example we updated all the author names and although the changes show up correctly on the blog landing page, the dynamic pages are not reflecting this change (i've tried different browsers and incognito window). I understand that next.js builts these pages when deploying but if this would then mean we'd have to re-deploy everytime we make even a small udpate to the conten on the backend.

nghiaht nghiaht · Accepted Answer · 2020-09-25T04:09:01

Your static pages are fetched when built. But Next.js does have an option for refreshing them on the fly.

Try revalidate options in getStaticProps (https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation)

export async function getStaticProps() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  return {
    props: {
      posts,
    },
    // Next.js will attempt to re-generate the page:
    // - When a request comes in
    // - At most once every second
    revalidate: 1, // In seconds
  }
}

They say that it's ISR approach (https://nextjs.org/docs/basic-features/data-fetching#incremental-static-regeneration)

Next.js dynamic pages do not update

1 Answers