`revalidatePath` Explained with Real Examples

revalidatePath invalidates cached data for a specific route path. Call it after a mutation and the named page, layout, or route handler fetches fresh data on the next visit instead of serving the cached copy.

typescript

// app/actions.ts
'use server'
 
import { revalidatePath } from 'next/cache'
 
export async function updateProfile() {
  await saveProfile()
  revalidatePath('/profile')
}

This clears the cached data for the /profile page. The next request re-renders it with fresh data, and the change is visible when the page reloads. It runs on the server only, so a Client Component cannot call it.

The path and type parameters

The first argument is a path. It can be a literal route or a pattern with dynamic segments. When the path contains a dynamic segment, you must pass a second argument of page or layout.

typescript

import { revalidatePath } from 'next/cache'
 
revalidatePath('/blog/post-1')
revalidatePath('/blog/[slug]', 'page')
revalidatePath('/blog/[slug]', 'layout')

A literal path refreshes that single route. A page pattern refreshes every matching page, while a layout pattern also refreshes everything nested beneath it. To clear everything, use the root layout pattern revalidatePath('/', 'layout'), which purges the client cache and invalidates all cached data.

Page vs layout revalidation

Revalidating a page only refreshes that page. Revalidating a layout refreshes the layout and all pages under it, which is broader and slower, because a layout wraps every nested segment.

Use a page pattern when a single content type changed, and a layout pattern when shared chrome, such as a header or sidebar, must update across a whole section. A broad layout invalidation costs more, so keep it for cases where the shared frame really changed.

In a Server Action vs a Route Handler

A Server Action updates the UI immediately when the affected path is in view. A Route Handler only marks the path for revalidation, which happens on the next visit, so a dynamic segment does not trigger many rebuilds at once.

typescript

// app/api/revalidate/route.ts
import { revalidatePath } from 'next/cache'
import type { NextRequest } from 'next/server'
 
export async function GET(request: NextRequest) {
  const path = request.nextUrl.searchParams.get('path')
 
  if (!path) {
    return Response.json({ revalidated: false, message: 'Missing path' })
  }
 
  revalidatePath(path)
  return Response.json({ revalidated: true, now: Date.now() })
}

The handler reads the target path from the query string, which is a common pattern for webhooks that trigger revalidation from outside the app. Because anyone can call the route, check a shared secret before revalidating in a real app.

Paths, tags, and rewrites

When rewrites are configured, pass the destination path, not the URL the user sees. The function works on the route file structure, so a rewrite from /blog to /news requires revalidatePath('/news').

Paths target one route, while tags can reach every page that shows the same data. Prefer tags when the content appears in many places, as covered in cacheTag explained. For the tag invalidation functions, see revalidateTag vs updateTag.

Common mistakes

• Passing the source path of a rewrite instead of the destination path.
• Omitting the type argument for a dynamic segment pattern, which is required.
• Appending /page or /layout to the path instead of using the type argument.