Revalidation patterns in NextJS - Mini Project: Build & Apply

Next.js Revalidation Patterns

📖 Scenario: You are building a simple blog homepage using Next.js. The blog posts data changes occasionally, so you want to make sure the page updates without rebuilding the entire site every time.

🎯 Goal: Create a Next.js page that fetches blog posts data and uses revalidate to update the page every 10 seconds automatically.

📋 What You'll Learn

Create a posts array with three blog post objects, each having id, title, and content fields.

Add a revalidateTime variable set to 10 (seconds).

Write an async function getStaticProps that returns the posts data and sets revalidate to revalidateTime.

Create a default exported React functional component HomePage that receives posts as props and renders the titles in an unordered list.

💡 Why This Matters

🌍 Real World

Many websites need to update content regularly without full rebuilds. Next.js revalidation lets you keep pages fresh with minimal server load.

💼 Career

Understanding revalidation patterns is important for building fast, scalable React apps with Next.js that handle dynamic data efficiently.

1

Create the blog posts data array

Create a constant array called posts with exactly three objects. Each object must have these exact keys and values: { id: 1, title: 'First Post', content: 'This is the first post.' }, { id: 2, title: 'Second Post', content: 'This is the second post.' }, and { id: 3, title: 'Third Post', content: 'This is the third post.' }.

NextJS

# Your code here

Need a hint?

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

2

Add the revalidation time variable

Create a constant called revalidateTime and set it to the number 10.

NextJS

const posts = [
  { id: 1, title: 'First Post', content: 'This is the first post.' },
  { id: 2, title: 'Second Post', content: 'This is the second post.' },
  { id: 3, title: 'Third Post', content: 'This is the third post.' }
];

# Your code here

Need a hint?

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

3

Write the getStaticProps function with revalidation

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: 'First Post', content: 'This is the first post.' },
  { id: 2, title: 'Second Post', content: 'This is the second post.' },
  { id: 3, title: 'Third Post', content: 'This is the third post.' }
];

const revalidateTime = 10;

# Your code here

Need a hint?

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

4

Create the HomePage component to display posts

Create a default exported React functional component called HomePage that accepts posts as a prop. Inside, return a <main> element containing an unordered list <ul>. Map over posts and render each post's title inside a <li> with a unique key set to the post's id.

NextJS

const posts = [
  { id: 1, title: 'First Post', content: 'This is the first post.' },
  { id: 2, title: 'Second Post', content: 'This is the second post.' },
  { id: 3, title: 'Third Post', content: 'This is the third post.' }
];

const revalidateTime = 10;

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

# Your code here

Need a hint?

Use export default function HomePage({ posts }) { return ( <main><ul>{posts.map(post => <li key={post.id}>{post.title}</li>)}</ul></main> ) }.