revalidatePath の使い方。どこまで作り直されるか

書き換えたら、作り直しを指示する

ビルドのときに描いたページは、保存したものがそのまま配られます。データを書き換えても、作り直しを指示しない限り、画面は変わりません（revalidatePath の最小構成サンプル）。

指示するのが revalidatePath です。データを書き換える Server Action や Route Handler の中で呼びます。

// app/actions.ts
'use server'
import { revalidatePath } from 'next/cache'
 
export async function addPost(formData: FormData) {
  await savePost(formData)
  revalidatePath('/posts')
}

実機で、ビルドのときに描いたページに対して revalidatePath('/') を呼ぶと、次に開いたときだけ描き直され（キャッシュ MISS、描いた時刻が新しくなる）、その次からはまた保存したものが使われました（キャッシュ HIT）。

作り直される範囲

同じページの組を用意し、何を渡すとどこまで新しくなるかを確かめました。

呼び方	新しくなった	そのまま
revalidatePath('/items/1')	/items/1	/items/2
revalidatePath('/items/[id]', 'page')	/items/1 と /items/2	—
revalidatePath('/blog')	/blog	/blog/post
revalidatePath('/blog', 'layout')	/blog と /blog/post	—

• URL をそのまま渡すと、そのページだけが作り直される
• 動的なルートをまとめて作り直すには、角括弧のままのパスと 'page' を渡す
• 配下のページまで作り直すには、'layout' を渡す。/blog だけを渡しても、/blog/post は古いままでした

描いている途中では呼べない

ページを開くたびに新しくしたくて、ページの中で呼ぶと、実機では開いたときに 500 になりました。

Error: Route /during used "revalidatePath /" during render which is unsupported.

作り直しの指示は、データを書き換えた側で出すものです。開くたびに新しくしたいページは、作り直すのではなく、開かれたときに描く形にします（Next.js のキャッシュ）。

revalidateTag・updateTag との違い

revalidatePath はページの単位で作り直します。データを取る処理に名前（タグ）を付けておけば、そのデータを使う全ページをまとめて作り直せます。Next.js 16 では、書いた直後の表示に反映したいなら updateTag、時間をおいてよいなら revalidateTag を使います（revalidateTag の第2引数と updateTag）。

まとめ

1. データを書き換えた Server Action や Route Handler の中で呼ぶ
2. 作り直されるのは、次に開かれたときの1回。その後はまた保存される
3. 動的なルートは 'page'、配下まで含めるなら 'layout'
4. ページを描いている途中では呼べない