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

revalidatePath

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

Good to know:

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

パラメータ​

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

戻り値​

revalidatePath は値を返しません。

例​

特定のURLを再検証する​

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

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

ページパスを再検証する​

import { revalidatePath } from 'next/cache'
revalidatePath('/blog/[slug]', 'page')
// Route Groupsを使用する場合
revalidatePath('/(main)/blog/[slug]', 'page')

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

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

import { revalidatePath } from 'next/cache'
revalidatePath('/blog/[slug]', 'layout')
// Route Groupsを使用する場合
revalidatePath('/(main)/post/[slug]', 'layout')

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

すべてのデータを再検証する​

import { revalidatePath } from 'next/cache'

revalidatePath('/', 'layout')

これは、クライアントサイドRouter Cacheをパージし、次回のページ訪問時にデータキャッシュを再検証します。

Server Actions​

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