Revalidation strategies (time-based) in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the page to revalidate every 10 seconds.

NextJS

export const revalidate = [1];

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

A0

Bfalse

C10

Dtrue

Attempts:

3 left

💡 Hint

Common Mistakes

Using true or false instead of a number.

Setting revalidate to 0 disables revalidation.

Setting revalidate to 10 means Next.js will regenerate the page every 10 seconds.

2fill in blank

medium

Complete the code to export a function that fetches data and sets revalidation to 60 seconds.

NextJS

export async function generateStaticParams() {
  // fetch data here
}

export const revalidate = [1];

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

A60

B30

Cfalse

Dtrue

Attempts:

3 left

💡 Hint

Common Mistakes

Using boolean values instead of a number.

Choosing a too small or zero value disables revalidation.

Setting revalidate to 60 means the page will update every 60 seconds.

3fill in blank

hard

Fix the error in the code to correctly set revalidation to 15 seconds.

NextJS

export const revalidate = [1];

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

A15

Bfalse

Ctrue

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Putting the number inside quotes makes it a string, causing errors.

Using boolean values instead of a number.

The revalidate value must be a number, not a string. Remove quotes to fix it.

4fill in blank

hard

Fill both blanks to export a page component and set revalidation to 120 seconds.

NextJS

export default function Page() {
  return <h1>[1]</h1>;
}

export const revalidate = [2];

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

A"Hello World"

B60

C120

D"Welcome"

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes incorrectly around numbers.

Putting wrong text inside the heading.

The component returns <h1>Hello World</h1> and revalidate is set to 120 seconds.

5fill in blank

hard

Fill all three blanks to export a page component that shows current time and revalidates every 5 seconds.

NextJS

export default function TimePage() {
  const now = new Date().toLocaleTimeString();
  return <p>[1] {now}</p>;
}

export const revalidate = [2];

export const dynamic = '[3]';

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

A"Current time:"

B5

Cfalse

Dtrue

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'true' for dynamic disables static generation.

Putting numbers inside quotes.

Missing the label text inside the paragraph.

The component shows "Current time:" followed by the time. revalidate is 5 seconds, and dynamic is set to 'false' to enable static generation with revalidation.