【Next.js】revalidatePathのtypeの指定方法

revalidatePathの基本構文

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

revalidatePath関数は2つのパラメータを受け取ります：

• path: 再検証したいパスの文字列（1024文字未満、大文字小文字を区別）
• type: 再検証するパスのタイプを指定する（オプション）

動的セグメントを含む場合は必須

重要なルール

動的セグメント（[slug]など）を含むパスを指定する場合、typeパラメータは必須です。

'use server'

import { revalidatePath } from 'next/cache'

export async function updateBlogPost() {
  // 動的セグメントを含む場合はtypeが必須
  revalidatePath('/blog/[slug]', 'page')
}

具体的なパスの場合は不要

一方、具体的なパス（リテラルルートセグメント）を指定する場合は、typeパラメータは不要です。

'use server'

import { revalidatePath } from 'next/cache'

export async function updateSpecificPost() {
  // 具体的なパスの場合はtypeは不要
  revalidatePath('/blog/1')

typeの値と効果

'page'タイプの使用

'page'タイプは、指定したページファイルにマッチするURLを再検証します。

import { revalidatePath } from 'next/cache'

export async function revalidateBlogPage() {
  // /blog/[slug] ページにマッチするすべてのURLを再検証
  revalidatePath('/blog/[slug]', 'page')
  
  // ルートグループを使用している場合
  revalidatePath('/(main)/blog/[slug]', 'page')
}

'page'タイプは、そのページより下位のページには影響しません。例えば、/blog/[slug]を再検証しても、/blog/[slug]/[author]は再検証されません。

'layout'タイプの使用

'layout'タイプは、指定したレイアウトファイルにマッチするURLと、そのレイアウトを使用するすべての下位ページを再検証します。

import { revalidatePath } from 'next/cache'

export async function revalidateBlogLayout() {
  // /blog/[slug] レイアウトとそれを使用する下位ページをすべて再検証
  revalidatePath('/blog/[slug]', 'layout')
  
  // ルートグループを使用している場合
  revalidatePath('/(main)/post/[slug]', 'layout')
}

実践的な使用例

サーバーアクションでの使用

'use server'

import { revalidatePath } from 'next/cache'

export async function createPost(formData: FormData) {
  try {
    // データベースへの投稿作成処理
    await savePostToDatabase(formData)
    
    // ブログ一覧ページを再検証
    revalidatePath('/blog', 'page')
    
    // 新しい投稿の個別ページを再検証（動的セグメント）
    revalidatePath('/blog/[slug]', 'page')
  } catch (error) {
    throw new Error('投稿の作成に失敗しました')
  }
}

全データの再検証

アプリケーション全体のキャッシュを再検証したい場合は、ルートパスで'layout'タイプを使用します。

import { revalidatePath } from 'next/cache'

export async function revalidateAll() {
  // クライアントサイドのルーターキャッシュをパージし、
  // データキャッシュを次回訪問時に再検証
  revalidatePath('/', 'layout')
}

参考