Regenerate Next.js Pages On-demand (ISR) with Hasura Table Events

Incremental Static Regeneration (ISR) is a new feature in Next.js 12.1 that allows developers to create and update pages on-demand. By pairing ISR with Hasura table events, web pages can be kept up-to-date and only rebuilt when data changes. This tutorial demonstrates how to set up an example blog app using Next.js and Hasura. First, the Hasura environment is configured by adding a SECRET_TOKEN in Docker Compose and creating a new table called "post" with columns for id, title, and content. Then, a Next.js typescript app is created, and getStaticProps data fetching is set up to query Hasura using graphql-request. Incremental Static Regeneration is enabled by setting up a webhook that tells Next.js to rebuild specific pages when the data changes. Finally, an event trigger is created in the Hasura console events tab, and Next.js is run in production mode. When a new post is added in Hasura, refreshing the Next.js app will display the updated data. The source code for this example can be found on GitHub.