ISR (Incremental Static Regeneration) in NextJS - Mini Project: Build & Apply

Build a Blog with ISR (Incremental Static Regeneration) in Next.js

📖 Scenario: You are creating a simple blog website using Next.js. The blog posts data is static but can update occasionally. To keep the site fast and SEO-friendly, you will use Incremental Static Regeneration (ISR) to update the pages automatically after a set time without rebuilding the entire site.

🎯 Goal: Build a Next.js page that fetches blog posts data at build time and uses ISR to regenerate the page every 10 seconds.

📋 What You'll Learn

Create a static data array of blog posts with id, title, and content.

Add a revalidation time variable set to 10 seconds.

Implement getStaticProps to return the posts and revalidate time.

Create a functional React component that displays the list of blog posts.

💡 Why This Matters

🌍 Real World

Many websites need to show content that updates occasionally but want the speed and SEO benefits of static pages. ISR lets Next.js update pages in the background without rebuilding the whole site.

💼 Career

Understanding ISR is important for frontend developers working with Next.js to build fast, scalable, and SEO-friendly web applications that handle dynamic content efficiently.

1

Create the blog posts data array

Create a constant array called posts with these exact objects: { id: 1, title: 'Hello World', content: 'Welcome to the blog!' } and { id: 2, title: 'ISR in Next.js', content: 'Learn about Incremental Static Regeneration.' }.

NextJS

// Create the posts array with two blog post objects
// Your code here

Need a hint?

Use const posts = [ ... ] with two objects inside.

2

Set the revalidation time

Create a constant called revalidateTime and set it to 10 to represent 10 seconds for ISR revalidation.

NextJS

const posts = [
  { id: 1, title: 'Hello World', content: 'Welcome to the blog!' },
  { id: 2, title: 'ISR in Next.js', content: 'Learn about Incremental Static Regeneration.' }
];

// Create a constant revalidateTime and set it to 10
// Your code here

Need a hint?

Use const revalidateTime = 10; to set the revalidation interval.

3

Implement getStaticProps with ISR

Write an async function called getStaticProps that returns an object with props containing the posts array and a revalidate property set to revalidateTime.

NextJS

const posts = [
  { id: 1, title: 'Hello World', content: 'Welcome to the blog!' },
  { id: 2, title: 'ISR in Next.js', content: 'Learn about Incremental Static Regeneration.' }
];

const revalidateTime = 10;

// Write async function getStaticProps returning props with posts and revalidate with revalidateTime
// Your code here

Need a hint?

Use export async function getStaticProps() { return { props: { posts }, revalidate: revalidateTime } }.

4

Create the React component to display posts

Create a default exported React functional component called Blog that receives posts as a prop and returns a <main> element containing an <h1> with text 'Blog Posts' and an unordered list <ul> with each post's title in a <li>. Use post.id as the key for each list item.

NextJS

const posts = [
  { id: 1, title: 'Hello World', content: 'Welcome to the blog!' },
  { id: 2, title: 'ISR in Next.js', content: 'Learn about Incremental Static Regeneration.' }
];

const revalidateTime = 10;

export async function getStaticProps() {
  return {
    props: { posts },
    revalidate: revalidateTime
  };
}

// Create default export function Blog({ posts }) that returns main with h1 and ul listing post titles
// Your code here

Need a hint?

Use export default function Blog({ posts }) { return ( ... ) } with JSX inside.