revalidatePath

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

知っておくと良いこと:

revalidatePath は、指定されたパスが次にアクセスされたときにのみキャッシュを無効化します。つまり、動的ルートセグメントを含むパスで revalidatePath を呼び出しても、すぐに多くの再検証がトリガーされるわけではありません。無効化は次にそのパスがアクセスされたときにのみ発生します。

現在、サーバーアクションで使用した場合、revalidatePath はクライアントサイドルーターキャッシュ内のすべてのルートを無効化します。この動作は一時的なもので、将来的には特定のパスにのみ適用されるように更新される予定です。

revalidatePath を使用すると、サーバーサイドルートキャッシュ内の特定のパスのみが無効化されます。

パラメータ

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

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

戻り値

revalidatePath は値を返しません。

例

特定のURLを再検証

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

これにより、次回のページアクセス時に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')

これにより、クライアントサイドルーターキャッシュが消去され、次回のページアクセス時にデータキャッシュが再検証されます。

サーバーアクション

'use server'

import { revalidatePath } from 'next/cache'

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

ルートハンドラー

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',
  })
}

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',
  })
}

On this page