On-demand revalidation in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Next.js revalidation function.

NextJS

import { [1] } from 'next/cache';

Drag options to blanks, or click blank then click option'

AuseRouter

BrevalidatePath

CgetServerSideProps

DLink

Attempts:

3 left

💡 Hint

Common Mistakes

Importing unrelated functions like useRouter or Link.

Trying to import getServerSideProps which is for server rendering.

The revalidatePath function is imported from next/cache to trigger on-demand revalidation of a path.

2fill in blank

medium

Complete the code to trigger revalidation for the '/blog' path.

NextJS

export async function POST() {
  [1]('/blog');
  return new Response('Revalidated');
}

Drag options to blanks, or click blank then click option'

ArevalidatePath

BuseEffect

Credirect

Dfetch

Attempts:

3 left

💡 Hint

Common Mistakes

Using fetch which is for network requests.

Using redirect which changes navigation.

The revalidatePath function is called with the path string to refresh the cached page.

3fill in blank

hard

Fix the error in the code to correctly revalidate the '/products' page.

NextJS

import { revalidatePath } from 'next/cache';

export async function POST() {
  await [1]('/products');
  return new Response('Done');
}

Drag options to blanks, or click blank then click option'

ArevalidatePath

BrevalidatePath()

CrevalidatePath('/products')

Drevalidate

Attempts:

3 left

💡 Hint

Common Mistakes

Putting parentheses inside the blank causing syntax errors.

Using a wrong function name like 'revalidate'.

The function revalidatePath is called with the path as argument. The await keyword is used correctly with the function call.

4fill in blank

hard

Fill both blanks to create a POST API route that revalidates '/dashboard' and returns a JSON response.

NextJS

import { [1] } from 'next/cache';

export async function POST() {
  await [2]('/dashboard');
  return new Response(JSON.stringify({ message: 'Revalidated' }), { headers: { 'Content-Type': 'application/json' } });
}

Drag options to blanks, or click blank then click option'

ArevalidatePath

BuseRouter

Crevalidate

DgetStaticProps

Attempts:

3 left

💡 Hint

Common Mistakes

Using different function names in import and call.

Importing unrelated functions.

Both blanks require the revalidatePath function: one for import and one for calling it.

5fill in blank

hard

Fill all three blanks to create a server action that revalidates a dynamic path and returns a success message.

NextJS

import { [1] } from 'next/cache';

export async function revalidatePage(slug) {
  await [2](`/posts/$[3]`);
  return 'Page revalidated';
}

Drag options to blanks, or click blank then click option'

ArevalidatePath

Brevalidate

Cslug

Dpath

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong variable names for the dynamic segment.

Importing or calling the wrong function.

The function revalidatePath is imported and called with the dynamic path using the slug variable.