revalidatePath
revalidatePath allows you to invalidatecached 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 Proxy, as it only works in server environments.
Good to know:
- Server Functions: Updates the UI immediately (if viewing the affected 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
revalidatePathwith 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 route pattern corresponding to the data you want to revalidate, for example/product/[slug], or a specific URL,/product/123. Do not append/pageor/layout, use thetypeparameter instead. Must not exceed 1024 characters. This value is case-sensitive.type: (optional)'page'or'layout'string to change the type of path to revalidate. Ifpathcontains a dynamic segment, for example/product/[slug], this parameter is required. Ifpathis a specific URL,/product/1, omittype.
Use a specific URL when you want to refresh asingle page. Use a route pattern plustype to refreshmultiple URLs.
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 (the
layout.tsxat that segment), all nested layouts beneath it, and all pages beneath them - Route Handlers: Invalidates Data Cache entries accessed within route handlers. For example
revalidatePath("/api/data")invalidates this GET handler:
exportasyncfunctionGET() {constdata=awaitfetch('https://api.vercel.app/blog', { cache:'force-cache', })returnResponse.json(awaitdata.json())}Relationship withrevalidateTag andupdateTag
revalidatePath,revalidateTag andupdateTag serve different purposes:
revalidatePath: Invalidates a specific page or layout pathrevalidateTag: Marks data with specific tags asstale. Applies across all pages that use those tagsupdateTag: Expires data with specific tags. Applies across all pages that use those tags
When you callrevalidatePath, 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: /blogconstposts=awaitfetch('https://api.vercel.app/blog', { next: { tags: ['posts'] },})// Page B: /dashboardconstrecentPosts=awaitfetch('https://api.vercel.app/blog?limit=5', { next: { tags: ['posts'] },})After callingrevalidatePath('/blog'):
- Page A (/blog): Shows fresh data (page re-rendered)
- Page B (/dashboard): Still shows stale data (cache tag 'posts' not invalidated)
Learn about the difference betweenrevalidateTag andupdateTag.
Building revalidation utilities
revalidatePath andupdateTag are complementary primitives that are often used together in utility functions to ensure comprehensive data consistency across your application:
'use server'import { revalidatePath, updateTag }from'next/cache'exportasyncfunctionupdatePost() {awaitupdatePostInDatabase()revalidatePath('/blog')// Refresh the blog pageupdateTag('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 groupsrevalidatePath('/(main)/blog/[slug]','page')This will invalidate any URL that matches the providedpage file for revalidation on the next page visit. This willnot 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 groupsrevalidatePath('/(main)/post/[slug]','layout')This will invalidate any URL that matches the providedlayout 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'exportdefaultasyncfunctionsubmit() {awaitsubmitForm()revalidatePath('/')}Route Handler
import { revalidatePath }from'next/cache'importtype { NextRequest }from'next/server'exportasyncfunctionGET(request:NextRequest) {constpath=request.nextUrl.searchParams.get('path')if (path) {revalidatePath(path)returnResponse.json({ revalidated:true, now:Date.now() }) }returnResponse.json({ revalidated:false, now:Date.now(), message:'Missing path to revalidate', })}Was this helpful?