Next.js - revalidatePath() Function

---

---

The revalidatePath() Function

The Next.js revalidatePath() function is used to remove cached data on-demand for a specific path.

Syntax

The syntax for the revalidatePath() function is as follows:

import { revalidatePath } from 'next/cache'

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

Parameters

The revalidatePath() function accepts two parameters.

• path - string - The path to revalidate.
• type - (optional) 'page' or 'layout' string to change the type of path to revalidate.

Return Value

The revalidatePath() function does not return any value.

Example 1

In the example below, we are using the revalidatePath() function to revalidate the path "/blog/post-1". This will remove the cached data for the "/blog/post-1" page.

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

Example 2

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

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

// or with route groups
revalidatePath('/(main)/blog/[slug]', 'page')

Example 3

The code below will revalidate any URL that matches the provided layout file on the next page visit. This will cause pages beneath with the same layout to revalidate on the next visit. For example, in the above case, /blog/[slug]/[another] would also revalidate on the next visit.

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

Example 4

In the code below, we have a page that fetches posts from an API endpoint. We have a button that revalidates the cache when clicked.

import { revalidatePath } from 'next/cache'

interface Post {
    id: number
    title: string
    body: string
}

async function getData() {
    const res = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=3', {
        cache: 'no-cache'
    })

    const posts: Post[] = await res.json()
    
    return {
        timestamp: new Date().toISOString(),
        posts,
        message: 'Posts will update when revalidated'
    }
}

async function handleRevalidate() {
    'use server'
    revalidatePath('/')
}

export default async function Home() {
  const data = await getData()
  
  return (
    <main>
        <h1>Path Revalidation Demo</h1>
        
        <div>
            <p>Last Updated: {data.timestamp}</p>
            <p>{data.message}</p>
            
            <div>
            {data.posts.map(post => (
                <div key={post.id}>
                <h2>{post.title}</h2>
                </div>
            ))}
            </div>
        </div>
        
        <form action={handleRevalidate}>
            <button type="submit">
            Fetch New Posts
            </button>
        </form>
    </main>
  )
}

Output

The image below shows the output of the code snippet above. When we click the button, the cache of the home page is revalidated, and new post is loaded.