Revalidation after mutation in NextJS - Mini Project: Build & Apply

Revalidation after mutation in Next.js

📖 Scenario: You are building a simple blog page using Next.js. The page shows a list of posts fetched from a server. When a new post is added, you want the page to update automatically by revalidating the data.

🎯 Goal: Create a Next.js page that fetches posts with getStaticProps, adds a new post using a server action, and triggers revalidation so the page updates with the new post.

📋 What You'll Learn

Create a posts array with initial posts

Add a revalidateTime variable for incremental static regeneration

Use getStaticProps to fetch posts and set revalidation time

Create a server action to add a new post and trigger revalidation

💡 Why This Matters

🌍 Real World

This pattern is used in blogs, news sites, and e-commerce where content updates need to show quickly without rebuilding the entire site.

💼 Career

Understanding revalidation after mutation is key for Next.js developers to build fast, dynamic sites with static generation benefits.

1

DATA SETUP: Create initial posts array

Create a constant array called posts with these exact objects: { id: 1, title: 'Hello World' } and { id: 2, title: 'Next.js is awesome' }.

NextJS

# Your code here

Need a hint?

Use export const posts = [...] to create the array with two objects.

2

CONFIGURATION: Set revalidation time

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

NextJS

export const posts = [
  { id: 1, title: 'Hello World' },
  { id: 2, title: 'Next.js is awesome' }
];

# Your code here

Need a hint?

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

3

CORE LOGIC: Implement getStaticProps with revalidation

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

NextJS

export const posts = [
  { id: 1, title: 'Hello World' },
  { id: 2, title: 'Next.js is awesome' }
];

export const revalidateTime = 10;

# Your code here

Need a hint?

Use export async function getStaticProps() and return the posts and revalidate time.

4

COMPLETION: Add server action to add post and revalidate

Create an async function called addPost that takes a newPost object, pushes it to posts, and calls revalidatePath('/') to update the home page.

NextJS

export const posts = [
  { id: 1, title: 'Hello World' },
  { id: 2, title: 'Next.js is awesome' }
];

export const revalidateTime = 10;

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

# Your code here

Need a hint?

Import revalidatePath from next/cache, then create addPost that adds the post and calls revalidatePath('/') .