revalidateTag の第2引数と updateTag(Next.js 16)
実際に出るエラー
Next.js 16 で revalidateTag の第2引数が必須になり、以前の1引数の書き方は型チェックで止まります。
何が変わったか
Next.js 16 で、revalidateTag の第2引数が必須になりました。以前の書き方のままだと、こう壊れます。
'use server'
import { revalidateTag } from 'next/cache'
export async function save() {
revalidateTag('posts') // ← 引数が1つ
}
| 構成 | 起きること |
|---|---|
| 型チェックあり | ビルドが止まる。Expected 2 arguments, but got 1. |
| 型チェックを外している | 動く。呼ぶたびにログに非推奨の警告(上の文言) |
公式ドキュメントは、1引数の形は将来の版で動かなくなるかもしれないとしています。警告が出ているうちに直してください。
どちらを使うか
Next.js 16 では、作り直しの指示が2つに分かれました。どこで呼ぶかと、書いた人にすぐ見せる必要があるかで選びます。
| revalidateTag(tag, 'max') | updateTag(tag) | |
|---|---|---|
| 呼べる場所 | Server Action / Route Handler | Server Action だけ |
| 次に開かれたとき | 古い内容を返し、裏で作り直す | 作り直しが済むまで待って新しい内容を返す |
| 向いている場面 | 外のサービスからの通知、多少遅れてよい一覧 | 書き込んだ本人に、書いた結果をすぐ見せる |
Server Action で、書いた結果をすぐ見せる
'use server'
import { updateTag } from 'next/cache'
export async function createPost(formData: FormData) {
await db.post.create({ data: { title: String(formData.get('title')) } })
updateTag('posts')
}
多少遅れてよいもの・外からの通知
revalidateTag('posts', 'max')
公式ドキュメントでは 'max' が推奨です。次に開いた人には古い内容が返り、そのあいだに裏で作り直されます。
Route Handler で updateTag は使えない
外のサービス(記事の管理画面など)から呼んでもらう入口を Route Handler で作り、そこで updateTag を呼ぶと、呼ばれたときに 500 になります。
Error: updateTag can only be called from within a Server Action. To invalidate cache tags in Route Handlers or other contexts, use revalidateTag instead.
実機で確かめました。ビルドも型チェックも通るので、連携を本番で初めて動かしたときに気づきます。
Route Handler では revalidateTag を使います。すぐに捨てたいなら、公式ドキュメントの示す形はこうです。
revalidateTag('posts', { expire: 0 })
描画の途中では呼べない
「開くたびに最新にしたい」と、ページの中で updateTag を呼ぶとビルドが止まります。
Error: Route / used "updateTag posts" during render which is unsupported. To ensure revalidation is performed consistently it must always happen outside of renders and cached functions.
作り直しの指示は、データを書き換えた側で出します。開くたびに最新を出したいなら、そのページを開かれたときに描く形にします(キャッシュの解説)。
タグを付けていないと、何も起きない
revalidateTag も updateTag も、タグの付いたキャッシュを捨てる指示です。公式ドキュメントによると、タグは fetch の next.tags か、'use cache' の中の cacheTag で付けます。
タグを付けていないページには効きません。ページ単位で作り直すなら revalidatePath を使います(更新を反映させる最小構成)。
出典
- nextjs.org/docs/app/api-reference/functions/revalidateTag
- nextjs.org/docs/app/api-reference/functions/updateTag
- nextjs.org/docs/messages/revalidate-tag-single-arg
このページの内容は上記の一次情報を基準に書いています。個人ブログや二次情報を根拠にしていません。