💨
Next.js revalidatePathを簡単にわかりやすく解説
導入
next.jsのサーバー側を設定しているときに、revalidateが出てきます。この記事は、「revalidatePathって何？」、「revalidateを日本語にすると再検証と出てきたけど、意味が分からない」という人に向けて書きました。revalidatePathについて理解しましょう。
revalidatePathとは
revalidatePathは、指定されたpathのcacheにデータを入れなおす。
引数
revalidatePath(path:string,type?:'page'|'layout');
path:revalidateつまり、cacheにデータを入れなおしたいpathを入れる
type:pathの種類。'page'か'layout'を入れる。layoutの場合、同じlayoutファイルの下にあるpageすべてが、revalidateされる。
戻り値
revalidatePathには、戻り値はありません
server actionでの使い方
app/action.ts
'use server'
import {revalidtePath} from 'next/cache'
export default async function submit(){
await submitForm()
revalidatePath('/')
}
route handelerでの使い方
app/api/revalidate/route.ts
import {revalidatePath} from 'next/cache'
import {NextRequest} from 'next/server'
export async function GET(request:NextRequest){
const path=request.nextUrl.searchParams.get('path')
//リクエストが/home?name=leeに与えられたとすると、searchParamsは、{'name':'lee'}という形式を返している
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'
})
まとめ
revalidatePathは、指定されたpathのcacheにデータを入れなおす。
参考文献:
Discussion