Configure Incremental Static Regeneration in Next.js to Refresh Static Pages Automatically

Desired outcome

You want a page that is generated at build time to be updated in the background after a set interval, so visitors see fresh content without waiting for a full site rebuild.

Prerequisites

• Next.js version 9.5 or later
• Node.js >=12 (current LTS recommended)
• A page that uses getStaticProps to fetch data
• A deployment target that runs a Node.js server (Vercel, custom server, or next start locally)

Procedure

1. Create or edit a page that exports getStaticProps. Add a revalidate value (seconds) to enable ISR.

   // pages/blog.js
   import { useEffect, useState } from 'react'
   
   export default function Blog({ posts }) {
     const [data, setData] = useState(posts)
     useEffect(() => {
       setData(posts)
     }, [posts])
     return (
       
         Blog
         
   
           {data.map(p => (
             
   {p.title}
           ))}
         
       
     )
   }
   
   export async function getStaticProps() {
     const res = await fetch('https://example.com/api/posts')
     const posts = await res.json()
     return {
       props: { posts },
       // Re-generate the page at most once every 60 seconds
       revalidate: 60,
     }
   }
   

2. Build the application (production bundle). Run this in your project root:

   npm run build
   

3. Start the Next.js server to serve the built pages:

   npm run start
   

   (Equivalent to next start if you have the scripts configured.)
4. Request the page from a browser or curl. The first request serves the statically generated HTML.
5. Wait longer than the revalidate interval (e.g., >60 seconds) and make another request. Next.js will serve the cached page while triggering a background re‑generation. When the background job finishes, the next request receives the updated content.

Expected checks

• First response contains the initial data fetched at build time.
• After waiting > revalidate seconds, a subsequent request shows updated data.
• Inspect response headers: the request that triggered background regeneration includes x-nextjs-revalidate: 1.
• In the server console (or Vercel logs) you should see a line like revalidating /blog when the background job runs.

Recovery options

• If revalidation fails (e.g., external API down), Next.js continues to serve the last successfully generated static version.
• To disable ISR for a page, remove the revalidate key or set it to false.
• Setting a very high interval (e.g., revalidate: 86400) effectively turns off frequent updates while keeping the mechanism available.
• To force a full rebuild, delete the .next cache folder and run next build again.