Revalidation strategies (time-based) in NextJS - Mini Project: Build & Apply

Implementing Time-Based Revalidation in Next.js

📖 Scenario: You are building a simple blog homepage using Next.js. The blog posts data is fetched from a static source but you want the page to update automatically every 10 seconds to show any new posts without needing a full redeploy.

🎯 Goal: Build a Next.js page that fetches blog posts data and uses time-based revalidation to update the page every 10 seconds.

📋 What You'll Learn

Create a static array of blog posts with exact titles and ids

Add a revalidation time variable set to 10 seconds

Use getStaticProps to fetch the posts and set the revalidation time

Create a functional React component that displays the blog post titles

💡 Why This Matters

🌍 Real World

Time-based revalidation is useful for blogs, news sites, or any content that updates regularly but does not need real-time updates. It balances performance and freshness.

💼 Career

Understanding Next.js data fetching and revalidation is important for frontend developers working with modern React frameworks to build fast, SEO-friendly websites.

1

Create the blog posts data array

Create a constant array called posts with these exact objects: { id: 1, title: 'Hello Next.js' }, { id: 2, title: 'Learning Revalidation' }, and { id: 3, title: 'Static Props in Next.js' }.

NextJS

// Create the posts array with the specified objects
// Your code here

Need a hint?

Use const posts = [ ... ] with the exact objects inside.

2

Add the revalidation time variable

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

NextJS

const posts = [
  { id: 1, title: 'Hello Next.js' },
  { id: 2, title: 'Learning Revalidation' },
  { id: 3, title: 'Static Props in Next.js' }
];

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

Need a hint?

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

3

Implement getStaticProps 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: 'Hello Next.js' },
  { id: 2, title: 'Learning Revalidation' },
  { id: 3, title: 'Static Props in Next.js' }
];

const revalidateTime = 10;

// Write the getStaticProps function below
// 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 functional component called HomePage that accepts posts as a prop and returns a <main> element containing an unordered list. Each list item should display the post's title and have a key set to the post's id.

NextJS

const posts = [
  { id: 1, title: 'Hello Next.js' },
  { id: 2, title: 'Learning Revalidation' },
  { id: 3, title: 'Static Props in Next.js' }
];

const revalidateTime = 10;

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

// Create the HomePage component below
// 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> ) }.