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.

Practice

1. What is the main purpose of on-demand revalidation in Next.js?

easy

A. To disable static site generation completely

B. To rebuild the whole site every time a user visits

C. To update specific static pages instantly without rebuilding the entire site

D. To cache pages permanently without updates

Solution

1. Step 1: Understand static site generation

   Static pages are pre-built and served fast but can become outdated.

2. Step 2: Role of on-demand revalidation

   It updates only specific pages instantly without rebuilding the whole site, keeping content fresh.

3. Final Answer:

   To update specific static pages instantly without rebuilding the entire site -> Option C

4. Quick Check:

   On-demand revalidation = update specific pages fast [OK]

Hint: Remember: on-demand means update only what is needed [OK]

Common Mistakes:

• Thinking it rebuilds the entire site
• Confusing it with disabling static generation
• Assuming pages never update

2. Which Next.js API method is used inside an API route to trigger on-demand revalidation?

easy

A. res.reload(path)

B. res.refresh(path)

C. res.update(path)

D. res.revalidate(path)

Solution

1. Step 1: Identify the method for revalidation

   Next.js provides res.revalidate(path) to trigger revalidation of a page.

2. Step 2: Confirm method usage in API route

   This method is called inside an API route handler to update the static page at the given path.

3. Final Answer:

   res.revalidate(path) -> Option D

4. Quick Check:

   API route uses res.revalidate() to update pages [OK]

Hint: Look for 'revalidate' keyword in the method name [OK]

Common Mistakes:

• Using non-existent methods like res.refresh()
• Confusing with client-side reload methods
• Misspelling the method name

3. Given this API route code snippet, what will happen when a POST request with the correct secret is sent?

export default async function handler(req, res) {
  if (req.method === 'POST' && req.query.secret === process.env.MY_SECRET) {
    await res.revalidate('/blog/post-1')
    return res.json({ revalidated: true })
  }
  return res.status(401).json({ message: 'Invalid token' })
}

medium

A. The page '/blog/post-1' will be revalidated and a success JSON returned

B. The entire site will rebuild and return a success JSON

C. The request will fail with a 401 error regardless of the secret

D. The page '/blog/post-1' will reload on the client side

Solution

1. Step 1: Check request method and secret

   The handler checks if the method is POST and the secret matches the environment variable.

2. Step 2: Call res.revalidate on the specific page

   If conditions pass, it calls res.revalidate('/blog/post-1') to update that page only.

3. Final Answer:

   The page '/blog/post-1' will be revalidated and a success JSON returned -> Option A

4. Quick Check:

   Correct secret + POST triggers revalidation [OK]

Hint: Check method and secret before revalidate call [OK]

Common Mistakes:

• Assuming entire site rebuilds
• Ignoring secret check
• Thinking client reload happens automatically

4. Identify the error in this API route code for on-demand revalidation:

export default async function handler(req, res) {
  if (req.method === 'GET' && req.query.secret === process.env.SECRET) {
    await res.revalidate('/home')
    res.json({ revalidated: true })
  } else {
    res.status(401).json({ message: 'Unauthorized' })
  }
}

medium

A. Missing await before res.json()

B. Not returning after res.json() causing possible errors

C. Using GET method instead of POST for revalidation

D. Incorrect path string in res.revalidate()

Solution

1. Step 1: Check response handling after revalidation

   After calling res.revalidate() and sending JSON, the function should return to avoid continuing execution.

2. Step 2: Identify missing return statement

   The code calls res.json() but does not return, which can cause errors or multiple responses.

3. Final Answer:

   Not returning after res.json() causing possible errors -> Option B

4. Quick Check:

   Always return after sending response [OK]

Hint: Return immediately after sending response [OK]

Common Mistakes:

• Using GET instead of POST (allowed but not recommended)
• Forgetting to return after res.json()
• Assuming res.revalidate() rebuilds entire site

5. You want to revalidate multiple pages on-demand after updating content. Which approach correctly triggers revalidation for '/about' and '/contact' in one API route?

hard

A. await res.revalidate('/about'); await res.revalidate('/contact'); res.json({ revalidated: true })

B. await res.revalidate(['/about', '/contact']); res.json({ revalidated: true })

C. res.revalidate('/about', '/contact'); res.json({ revalidated: true })

D. res.revalidate('/about'); res.revalidate('/contact'); res.json({ revalidated: true })

Solution

1. Step 1: Understand res.revalidate usage

   The res.revalidate() method accepts a single path string and returns a promise.

2. Step 2: Revalidate multiple pages sequentially

   To revalidate multiple pages, call await res.revalidate() separately for each path before sending response.

3. Final Answer:

   await res.revalidate('/about'); await res.revalidate('/contact'); res.json({ revalidated: true }) -> Option A

4. Quick Check:

   Call res.revalidate() separately for each page [OK]

Hint: Call revalidate separately for each page with await [OK]

Common Mistakes:

• Passing array of paths to res.revalidate() (not supported)
• Calling res.revalidate without await causing race conditions
• Calling res.revalidate without returning or sending response