revalidatePath

revalidatePath allows you to invalidate cached data on-demand for a specific path.

Usage

revalidatePath can be called in Server Functions and Route Handlers.

revalidatePath cannot be called in Client Components or Middleware, as it only works in server environments.

Good to know:

• Server Functions: Updates the UI immediately (if viewing the revalidated path). Currently, it also causes all previously visited pages to refresh when navigated to again. This behavior is temporary and will be updated in the future to apply only to the specific path.
• Route Handlers: Marks the path for revalidation. The revalidation is done on the next visit to the specified path. This means calling revalidatePath with a dynamic route segment will not immediately trigger many revalidations at once. The invalidation only happens when the path is next visited.

Parameters

revalidatePath(path: string, type?: 'page' | 'layout'): void;

• path: Either a string representing the filesystem path associated with the data you want to revalidate (for example, /product/[slug]/page), or the literal route segment (for example, /product/123). Must not exceed 1024 characters. This value is case-sensitive.
• type: (optional) 'page' or 'layout' string to change the type of path to revalidate. If path contains a dynamic segment (for example, /product/[slug]/page), this parameter is required. If path refers to the literal route segment, e.g., /product/1 for a dynamic page (e.g., /product/[slug]/page), you should not provide type.

Returns

revalidatePath does not return a value.

What can be invalidated

The path parameter can point to pages, layouts, or route handlers:

• Pages: Invalidates the specific page
• Layouts: Invalidates the layout and all pages beneath it
• Route Handlers: Invalidates Data Cache entries accessed within route handlers. For example revalidatePath("/api/data") invalidates this GET handler:

export async function GET() {
  const data = await fetch('https://api.vercel.app/blog', {
    cache: 'force-cache',
  })
 
  return Response.json(await data.json())
}

Relationship with revalidateTag

revalidatePath and revalidateTag serve different purposes:

• revalidatePath: Invalidates a specific page or layout path
• revalidateTag: Invalidates data with specific tags across all pages that use those tags

When you call revalidatePath, only the specified path gets fresh data on the next visit. Other pages that use the same data tags will continue to serve cached data until those specific tags are also revalidated:

// Page A: /blog
const posts = await fetch('https://api.vercel.app/blog', {
  next: { tags: ['posts'] },
})
 
// Page B: /dashboard
const recentPosts = await fetch('https://api.vercel.app/blog?limit=5', {
  next: { tags: ['posts'] },
})

After calling revalidatePath('/blog'):

• Page A (/blog): Shows fresh data (page re-rendered)
• Page B (/dashboard): Still shows stale data (cache tag 'posts' not invalidated)

Building revalidation utilities

revalidatePath and revalidateTag are complementary primitives that are often used together in utility functions to ensure comprehensive data consistency across your application:

'use server'
 
import { revalidatePath, revalidateTag } from 'next/cache'
 
export async function updatePost() {
  await updatePostInDatabase()
 
  revalidatePath('/blog') // Refresh the blog page
  revalidateTag('posts') // Refresh all pages using 'posts' tag
}

This pattern ensures that both the specific page and any other pages using the same data remain consistent.

Examples

Revalidating a specific URL

import { revalidatePath } from 'next/cache'
revalidatePath('/blog/post-1')

This will invalidate one specific URL for revalidation on the next page visit.

Revalidating a Page path

import { revalidatePath } from 'next/cache'
revalidatePath('/blog/[slug]', 'page')
// or with route groups
revalidatePath('/(main)/blog/[slug]', 'page')

This will invalidate any URL that matches the provided page file for revalidation on the next page visit. This will not invalidate pages beneath the specific page. For example, /blog/[slug] won't invalidate /blog/[slug]/[author].

Revalidating a Layout path

import { revalidatePath } from 'next/cache'
revalidatePath('/blog/[slug]', 'layout')
// or with route groups
revalidatePath('/(main)/post/[slug]', 'layout')

This will invalidate any URL that matches the provided layout file for revalidation on the next page visit. This will cause pages beneath with the same layout to be invalidated and revalidated on the next visit. For example, in the above case, /blog/[slug]/[another] would also be invalidated and revalidated on the next visit.

Revalidating all data

import { revalidatePath } from 'next/cache'
 
revalidatePath('/', 'layout')

This will purge the Client-side Router Cache, and invalidate the Data Cache for revalidation on the next page visit.

Server Function

'use server'
 
import { revalidatePath } from 'next/cache'
 
export default async function submit() {
  await submitForm()
  revalidatePath('/')
}

Route Handler

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) {
    revalidatePath(path)
    return Response.json({ revalidated: true, now: Date.now() })
  }
 
  return Response.json({
    revalidated: false,
    now: Date.now(),
    message: 'Missing path to revalidate',
  })
}