Revalidation after mutation in NextJS

Introduction

Revalidation after mutation helps keep your website data fresh by updating the page after you change something.

When you update data on the server and want the page to show the latest info.

After submitting a form that changes content, like adding a comment.

When deleting or editing items and you want the page to refresh automatically.

To avoid showing outdated data after a user action.

When using Next.js with static or cached pages that need to update after changes.

Syntax

NextJS

'use client';
import { useRouter } from 'next/navigation';

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

  // After mutation
  router.refresh();
}

router.refresh() tells Next.js to reload the current page data.

This works well with Next.js App Router and client components.

Examples

This example updates data via API and then refreshes the page to show new data.

NextJS

'use client';
import { useRouter } from 'next/navigation';

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

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

  return <button onClick={handleUpdate}>Update Data</button>;
}

After deleting an item, the page refreshes to remove it from the list.

NextJS

'use client';
import { useRouter } from 'next/navigation';

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

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

  return <button onClick={handleDelete}>Delete Item</button>;
}

Sample Program

This form sends a new comment to the server. After sending, it refreshes the page to show the new comment without needing a manual reload.

NextJS

'use client';
import { useRouter } from 'next/navigation';

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

  async function submitComment(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    await fetch('/api/comments', {
      method: 'POST',
      body: JSON.stringify({ text: formData.get('comment') }),
      headers: { 'Content-Type': 'application/json' },
    });
    router.refresh();
  }

  return (
    <form onSubmit={submitComment} aria-label="Add comment form">
      <label htmlFor="comment">Comment:</label>
      <input id="comment" name="comment" required />
      <button type="submit">Add Comment</button>
    </form>
  );
}

Important Notes

Use router.refresh() only after the mutation completes successfully.

This method reloads the current route's data but keeps the UI state intact.

It works best with Next.js App Router and client components.

Summary

Revalidation after mutation updates page data after changes.

Use router.refresh() to reload data in Next.js App Router.

This keeps your UI showing fresh, accurate information automatically.