🐙

Next.jsのRoute Handlersについて

2024/07/02に公開

Next.js

TypeScript

tech

Route Handlersとは

requestやresponseを使って、カスタムに処理を作成できるもの(GETとかPOSTとか書くやつ)

Route Handlersはappディレクトリの中しか作成できない

使えるHTTPメソッド

GET,POST,PUT,PATCH,DELETE,HEAD,OPTIONSが使える
もしNext.jsにないメソッドを使ったときは、405 method not allowedが出る

NextRequestとNextResponseが使える

従来のrequestやresponseには無かった、便利な機能が使える。

動き

caching

GETメソッドのときは、デフォルトでcacheされる

export async function GET(){
const res=await fetch('https://data.mongodb-api.com/...',{
headers:{
'Content-Type':'application/json',
'API-Key':process.env.DATA_API_KEY,
},
})
const data=await res.json()

return NextResponse.json({data})
}

cacheが省略されるとき

requestとGETメソッドを同時に使うとき
他のHTTPメソッドを使うとき
cookiesやheadersを使うとき

注意事項

routeはappディレクトリ内にapiディレクトリを作成して、その中にroute.tsを作成

他のNext.jsのAPIとRoute Handlersを組み合わせる方法

cacheされたデータを更新

app/items/route.ts


export async function GET(){
const res=await fetch('https://data.mongodb-api.com',{
next:{revalidate:60}  //60秒ごとに更新される
})
}

Dynamic Route

route handlersは、ダイナミックにできる。ダイナミックとは、一つのファイルで複数のURLに対応できること

export async function GET(
request:Request,
{params}:{params:{slug:string}}
){
const slug=params.slug //"a","b","c"
}