revalidatePath

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

知っておくと良いこと:

• revalidatePath は、Node.js および Edge ランタイムの両方で利用できます。
• 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) が含まれている場合、このパラメーターは必須です。パスがリテラルルートセグメント (例: 動的ページ (例: /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')
// 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',
  })
}