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

これにより、次回のページ訪問時に特定のURLが再検証されます。

ページパスを再検証する

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

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

レイアウトパスを再検証する

import { revalidatePath } from 'next/cache'
revalidatePath('/blog/[slug]', 'layout')
// or with route groups
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',
  })
}