︙

revalidatePath

revalidatePathは、特定の path のキャッシュデータをオンデマンドでパージすることを可能にします。

Good to know:

revalidatePathは、Node.js と Edge runtimesの両方で利用可能です。

revalidatePathは、含まれている path が next に訪れたときにのみ cache を無効にします。これは、revalidatePathを dynamic route セグメントで呼び出しても、一度に多くの再検証がすぐにトリガーされないことを意味します。無効化は path が next に訪れたときにのみ発生します。

現在、revalidatePathはClient サイドの Router Cacheにあるすべての routes を無効にします。この動作は一時的なもので、将来的には特定の path にのみ適用するように更新される予定です。

revalidatePathを使用すると、server-side Route Cacheの中で特定の path のみが無効化されます。

Parameters

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

path: データに関連するファイルシステムの path を表す string,あるいは文字通りの route セグメント(例えば、/product/123)を指します(例えば、/product/[slug]/page)。1024 文字未満である必要があります。この value は大文字と小文字を区別します。
type: (オプション) 'page' または 'layout' string で、path の type を revalidate に変更します。pathが dynamic セグメント(例えば、/product/[slug]/page)を含む場合、このパラメーターは必須です。

Returns

revalidatePathはどの value も返しません。

Examples

特定の URL の再検証

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

これにより、 next ページ訪問時に特定の URL を revalidate することができます。

ページの再検証 Path

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

これは、提供された page ファイルと一致する任意の URL を次のページ訪問時に revalidate します。これにより、特定のページの下のページが無効になることは ありません 。たとえば、/blog/[slug]は /blog/[slug]/[author] を無効にしません。

Layout Path の再検証

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

これは、提供された layout ファイルと一致する任意の URL を次のページ訪問時に revalidate します。これにより、同じ layout を持つ下位のページも次の訪問時に revalidate されます。例えば、上記のケースでは、/blog/[slug]/[another]も次の訪問時に revalidate されます。

すべてのデータの再検証

import { revalidatePath } from "next/cache";

revalidatePath("/", "layout");

これにより、client 側の Router Cache がパージされ、次のページ訪問時にデータの Cache が再検証されます。

Server Action

app/actions.ts

'use server'

import { revalidatePath } from 'next/cache'

export default async function submit() {
  await submitForm()
  revalidatePath('/')
}

Route Handler

app/api/revalidate/route.ts

import { revalidatePath } from 'next/cache'
import { 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',
  })
}

app/api/revalidate/route.js

import { revalidatePath } from 'next/cache'

export async function GET(request) {
  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',
  })
}