メインコンテンツまでスキップ

revalidatePath

revalidatePath は、特定のパスに対してオンデマンドでキャッシュされたデータをパージすることができます。

Good to know:

  • revalidatePath は、Node.js と Edge ランタイムの両方で利用可能です。
  • revalidatePath は、指定されたパスが次に訪問されたときにのみキャッシュを無効化します。つまり、revalidatePath を dynamic route segment で呼び出しても、すぐに多くの再検証が一度にトリガーされるわけではありません。無効化は、パスが次に訪問されたときにのみ発生します。
  • 現在、revalidatePath は server action で使用されると、クライアントサイドの Router Cache内のすべてのルートを無効化します。この動作は一時的なものであり、将来的には特定のパスにのみ適用されるように更新されます。
  • revalidatePath を使用すると、サーバーサイドの Route Cache内の特定のパスのみが無効化されます。

パラメータ

revalidatePath(path: string, type?: 'page' | 'layout'): void;
  • path: 再検証したいデータに関連付けられたファイルシステムパスを表す文字列(例:/product/[slug]/page)またはリテラルのルートセグメント(例:/product/123)。1024文字未満である必要があります。この値は大文字と小文字を区別します。
  • type: (オプション)再検証するパスのタイプを変更するための 'page' または 'layout' 文字列。path に dynamic segment が含まれている場合(例:/product/[slug]/page)、このパラメータは必須です。パスがリテラルのルートセグメントを指す場合、例えば dynamic page の /product/1(例:/product/[slug]/page)の場合、type を指定する必要はありません。

戻り値

revalidatePath は値を返しません。

特定の URL の再検証

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

これは、次のページ訪問時に特定の URL を再検証します。

ページパスの再検証

import { revalidatePath } from 'next/cache'
revalidatePath('/blog/[slug]', 'page')
// またはルートグループを使用して
revalidatePath('/(main)/blog/[slug]', 'page')

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

レイアウトパスの再検証

import { revalidatePath } from 'next/cache'
revalidatePath('/blog/[slug]', 'layout')
// またはルートグループを使用して
revalidatePath('/(main)/post/[slug]', 'layout')

これは、次のページ訪問時に提供された layout ファイルに一致する任意の URL を再検証します。これにより、同じレイアウトを持つ下位のページが次の訪問時に再検証されます。例えば、上記の場合、/blog/[slug]/[another] も次の訪問時に再検証されます。

すべてのデータの再検証

import { revalidatePath } from 'next/cache'

revalidatePath('/', 'layout')

これは、クライアントサイドの Router Cache をパージし、次のページ訪問時に Data Cache を再検証します。

サーバーアクション

app/actions.ts
'use server'

import { revalidatePath } from 'next/cache'

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

ルートハンドラー

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

return Response.json({
revalidated: false,
now: Date.now(),
message: 'Missing path to revalidate',
})
}