mediumFrontend

How do you revalidate data after a mutation in Next.js?

Q: How do you revalidate data after a mutation in Next.js?

**TL;DR.** After a Server Action mutates data, call revalidatePath() or revalidateTag() to invalidate the affected caches, or router.refresh() on the client, so the UI reflects the change. Redirecting with redirect() also re-renders the target route fresh. mutation DB write revalidatePath/Tag purge caches <path class='d-edge-accent' d='M354 75 H402' marker-

887 views

Understand the problem

Refreshing caches once a Server Action changes data.

nextjsrevalidationserver-actionsmutations

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Mutate then revalidate + redirect

'use server';
import { revalidateTag, revalidatePath } from 'next/cache';
import { redirect } from 'next/navigation';

export async function createTodo(data) {
  const todo = await db.todo.create({ data });
  revalidateTag('todos');            // refresh anything tagged 'todos'
  revalidatePath('/todos');          // and this specific route
  redirect('/todos/' + todo.id);     // navigate to the fresh page
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

How do you fetch data in Next.js Client Components (SWR, React Query, use)?

What are layouts and nested layouts in the Next.js App Router?