Revalidation after mutation in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the function used to revalidate a path after mutation in Next.js.

NextJS

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

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

ArevalidatePath

BuseRouter

CgetServerSideProps

DfetchData

Attempts:

3 left

💡 Hint

Common Mistakes

Importing useRouter instead of revalidatePath

Using getServerSideProps which is unrelated here

Trying to import a non-existent fetchData function

The revalidatePath function from next/cache is used to trigger revalidation of a specific path after a mutation.

2fill in blank

medium

Complete the code to call the revalidation function for the '/dashboard' path after a data mutation.

NextJS

async function updateData() {
  // perform mutation
  await mutateData();
  [1]('/dashboard');
}

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

ArefreshPath

BrevalidatePath

CinvalidateCache

DreloadPage

Attempts:

3 left

💡 Hint

Common Mistakes

Using a non-existent function like refreshPath

Calling reloadPage which reloads the browser but doesn't revalidate cache

Trying to invalidateCache which is not a Next.js function

After mutating data, calling revalidatePath('/dashboard') tells Next.js to refresh the cached data for that path.

3fill in blank

hard

Fix the error in this mutation handler by correctly revalidating the path '/profile' after updating user data.

NextJS

export async function POST(request) {
  await updateUser(request.json());
  [1]('/profile');
  return new Response(null, { status: 200 });
}

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

AreloadPage

BrefreshPath

CrevalidatePath

DinvalidateCache

Attempts:

3 left

💡 Hint

Common Mistakes

Using reloadPage which reloads browser but doesn't revalidate cache

Calling a non-existent invalidateCache function

Using refreshPath which is not a Next.js function

Using revalidatePath('/profile') after updating user data triggers Next.js to refresh the cached page for '/profile'.

4fill in blank

hard

Fill both blanks to import and use the revalidation function correctly after a mutation in Next.js.

NextJS

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

export async function PATCH(request) {
  await updateSettings(request.json());
  [2]('/settings');
  return new Response(null, { status: 200 });
}

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

ArevalidatePath

BreloadPage

DinvalidateCache

Attempts:

3 left

💡 Hint

Common Mistakes

Using different function names for import and call

Trying to reload the page instead of revalidating cache

Using invalidateCache which does not exist

Importing and calling revalidatePath ensures the '/settings' page cache is refreshed after mutation.

5fill in blank

hard

Fill all three blanks to create a mutation handler that updates data, revalidates the path, and returns a success response.

NextJS

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

export async function PUT(request) {
  const data = await request.json();
  await [2](data);
  [3]('/account');
  return new Response(null, { status: 200 });
}

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

ArevalidatePath

BupdateAccount

DreloadPage

Attempts:

3 left

💡 Hint

Common Mistakes

Using reloadPage instead of revalidatePath

Not calling the update function before revalidation

Importing or calling functions with wrong names

This code imports revalidatePath, calls updateAccount to mutate data, then calls revalidatePath('/account') to refresh the cache.

Practice

1. What is the main purpose of revalidation after mutation in Next.js App Router?

easy

A. To update the page data after a change so the UI shows fresh information

B. To prevent any data changes from being saved

C. To reload the entire website from scratch

D. To disable user interactions temporarily

Solution

1. Step 1: Understand mutation effect

   When data changes (mutation), the UI might show old data if not updated.

2. Step 2: Purpose of revalidation

   Revalidation reloads or refreshes data so the UI reflects the latest changes.

3. Final Answer:

   To update the page data after a change so the UI shows fresh information -> Option A

4. Quick Check:

   Revalidation updates data = A [OK]

Hint: Revalidation means refreshing data after changes [OK]

Common Mistakes:

• Thinking revalidation stops data saving
• Confusing revalidation with full page reload
• Believing it disables user actions

2. Which Next.js App Router method is used to trigger revalidation after a mutation?

easy

A. router.replace()

B. router.reload()

C. router.push()

D. router.refresh()

Solution

1. Step 1: Identify method for revalidation

   Next.js App Router provides router.refresh() to reload data without full page reload.

2. Step 2: Differentiate from other methods

   router.reload() reloads whole page, router.push() and router.replace() change routes.

3. Final Answer:

   router.refresh() -> Option D

4. Quick Check:

   Revalidation uses router.refresh() = A [OK]

Hint: Use router.refresh() to reload data after mutation [OK]

Common Mistakes:

• Using router.reload() which reloads full page
• Confusing route navigation methods with revalidation
• Trying to use router.replace() for data refresh

3. Given this code snippet in a Next.js component:

import { useRouter } from 'next/navigation';

export default function UpdateButton() {
  const router = useRouter();

  async function handleClick() {
    await fetch('/api/update', { method: 'POST' });
    router.refresh();
  }

  return Update;
}

What happens when the button is clicked?

medium

A. The API is called, then the page data refreshes without full reload

B. Nothing happens because router.refresh() is incorrect

C. The page reloads completely, losing state

D. The button click causes a navigation to /api/update

Solution

1. Step 1: Analyze handleClick function

   It calls the API with POST, then calls router.refresh() to reload data.

2. Step 2: Understand router.refresh() effect

   This refreshes the current route's data without a full page reload or navigation.

3. Final Answer:

   The API is called, then the page data refreshes without full reload -> Option A

4. Quick Check:

   API call + router.refresh() updates data = C [OK]

Hint: router.refresh() updates data without full reload [OK]

Common Mistakes:

• Thinking router.refresh() reloads entire page
• Assuming router.refresh() navigates to API route
• Believing nothing happens due to syntax error

4. Identify the error in this Next.js code snippet that tries to revalidate after mutation:

import { useRouter } from 'next/navigation';

export default function DeleteButton() {
  const router = useRouter;

  async function handleDelete() {
    await fetch('/api/delete', { method: 'DELETE' });
    router.refresh();
  }

  return Delete;
}

medium

A. Button onClick should be onSubmit

B. fetch method DELETE is invalid in Next.js

C. router is not called as a function, so router.refresh() fails

D. handleDelete should not be async

Solution

1. Step 1: Check router initialization

   Code uses const router = useRouter; missing parentheses, so router is a function reference, not the router object.

2. Step 2: Effect on router.refresh()

   Calling router.refresh() fails because router is not an object but a function reference.

3. Final Answer:

   router is not called as a function, so router.refresh() fails -> Option C

4. Quick Check:

   useRouter missing () causes error = D [OK]

Hint: Always call useRouter() with parentheses [OK]

Common Mistakes:

• Forgetting parentheses on useRouter()
• Thinking DELETE method is invalid
• Confusing onClick with onSubmit

5. You have a Next.js page showing a list of items fetched from the server. After adding a new item via a mutation API call, you want the list to update automatically. Which approach correctly ensures the list refreshes with the new data without a full page reload?

hard

A. Call router.push('/current-page') after mutation to reload the page

B. Call router.refresh() after mutation to revalidate and update data

C. Reload the browser window with window.location.reload()

D. Do nothing; the list updates automatically without any code

Solution

1. Step 1: Understand goal

   After mutation, the UI must show updated list without full reload or navigation.

2. Step 2: Evaluate options

   router.push('/current-page') navigates and reloads route, window.location.reload() reloads full page, and doing nothing won't update data.

3. Step 3: Correct method

   router.refresh() triggers Next.js to revalidate data and update UI efficiently.

4. Final Answer:

   Call router.refresh() after mutation to revalidate and update data -> Option B

5. Quick Check:

   Use router.refresh() to update data after mutation = B [OK]

Hint: Use router.refresh() to update data without full reload [OK]

Common Mistakes:

• Using router.push() causing unnecessary navigation
• Reloading full page losing state
• Assuming UI updates automatically without refresh