How to Use revalidatePath in Next.js for On-Demand Revalidation

In Next.js, use revalidatePath(path) to manually trigger a revalidation of a static page at the given path. This function is useful in server actions or API routes to update static content without rebuilding the entire site.

Syntax

The revalidatePath function takes a single argument, which is the path of the page you want to revalidate. It is imported from next/cache and used inside server components or server actions.

• path: A string representing the URL path of the page to revalidate, e.g., '/blog/post-1'.

typescript

import { revalidatePath } from 'next/cache';

// Usage inside a server action or server component
async function updateData() {
  // ... update your data source
  revalidatePath('/some-path');
}

Example

This example shows a Next.js server action that updates some data and then calls revalidatePath to refresh the static page at /dashboard. When the action runs, the page will regenerate on the next request, showing fresh content.

typescript

import { revalidatePath } from 'next/cache';

export async function updateDashboard() {
  // Simulate data update
  await new Promise((resolve) => setTimeout(resolve, 100));

  // Trigger revalidation of the /dashboard page
  revalidatePath('/dashboard');
}

// Example server component using the action
export default async function DashboardUpdater() {
  await updateDashboard();
  return <p>Dashboard updated and revalidation triggered.</p>;
}

Output

<p>Dashboard updated and revalidation triggered.</p>

Common Pitfalls

• Calling revalidatePath on the client side will not work; it must be used in server components or server actions.
• Using an incorrect or non-existent path string will not trigger revalidation for the intended page.
• For dynamic routes, ensure the path matches the actual URL structure, including parameters.

typescript

import { revalidatePath } from 'next/cache';

// Wrong: calling on client side
'use client';

function ClientComponent() {
  // This will not work
  // revalidatePath('/home'); // This line would cause an error if uncommented
  return <p>Client side call</p>;
}

// Right: call inside server action
export async function serverAction() {
  revalidatePath('/home');
}

Quick Reference

Function	Description	Usage Context
revalidatePath(path)	Triggers revalidation of the static page at the given path	Server components, server actions
path	String URL path of the page to revalidate, e.g. '/blog/post-1'	String argument to revalidatePath
Import	import { revalidatePath } from 'next/cache'	At the top of server files

Key Takeaways

Use revalidatePath inside server components or server actions to refresh static pages on demand.

Pass the exact URL path string of the page you want to revalidate.

Do not call revalidatePath on the client side; it only works on the server.

For dynamic routes, ensure the path matches the actual route including parameters.

Import revalidatePath from 'next/cache' before using it.