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

revalidatePath

警告: revalidatePath は expirePath に置き換えられ、将来のバージョンで削除される予定です。

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

Good to know:

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

Parameters​

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

Returns​

revalidatePath は値を返しません。

Examples​

特定の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 が消去され、次回ページ訪問時にデータキャッシュが再検証されます。

サーバーアクション​

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'

// API ルートがGETリクエストを受け取った際のサンプルコード
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: '再検証するパスがありません',
  })
}