Quickstart for Using ISR on Vercel

This example shows how to create a Next.js page with a dynamic route that uses Incremental Static Regeneration. getStaticProps will be turned into an ISR Render Function (Serverless) when deployed to Vercel.

Try it out by:

• Create a new file pages/posts/[id].js and copy the contents below
• Navigate to localhost:3000/posts/1

You should see Hello World! displayed in the browser.

export default function Page({ posts }) {
  return posts[0].title;
}
 
export async function getStaticProps() {
  return {
    props: {
      posts: [
        {
          title: 'Hello World!',
        },
      ],
    },
    revalidate: 10, // In seconds
  };
}
 
export async function getStaticPaths() {
  return {
    paths: [
      {
        params: { id: '1' },
      },
    ],
    fallback: 'blocking',
  };
}

To learn more about ISR usage in Next.js, check out the documentation.

This example builds off the above background example to also regenerate the page on-demand using an API Route.

Try it out by:

• Copy the steps from the background example
• Create a secret token to prevent unauthorized access to the revalidation API Route
• Add the secret value as an Environment Variable
• Create a new API Route (pages/api/revalidate.js) and copy the contents below
• Navigate to localhost:3000/api/revalidate?secret=<your-token> to re-run getStaticProps

export default async function handler(req, res) {
  // Check for secret to confirm this is a valid request
  if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
    return res.status(401).json({ message: 'Invalid token' });
  }
 
  try {
    await res.revalidate('/post/1');
    return res.json({ revalidated: true });
  } catch (err) {
    // If there was an error, Next.js will continue
    // to show the last successfully generated page
    return res.status(500).send('Error revalidating');
  }
}

Try out a demo of on-demand revalidation or view the source code. To learn more about ISR usage in Next.js, check out the documentation.