🕌
NextRequest, NextResponseって何？という人へ
導入
NextRequest,NextResponseの説明が無いと感じたので記事にしました。
NextRequest
- 従来のrequestには無かった、便利な機能が使える。
- middlewareで使う
例えば
cookies:簡単にcookiesにアクセスできる
nextUrl:
- 従来のURLには無かったpathname,homeを参照できる。
- サイトのurlののような部分を、searchParamsを使うことで、{'name':'lee'}として取得できる
request.nextUrl.pathname
// /homeにrequestが行くとき、nextUrl.pathnameの指すpathnameは/home
request.nextUrl.searchParams
// /home?name=leeにrequestが行くとき、nextUrl.searchParamsの指すsearchParamsは{'name':'lee'}
set:cookieの名前とvalueをセットする
request.cookies.set('show-banner'.'false')//{name:'show-banner',value:'false'}のようにセットしている
get:ある名前をつけられたcookieのvalueを返す。その名前のcookieが見つからなかったらundefinedを返す
request.cookies.get('show-banner')
//show-bannerのbool値を返す
getAll():ある名前を付けられたcookieのvalueを返す。名前がrequestされなかったら、すべてのcookiesを返す。
[
{name:'experiments',value:'new-pricing-page',Path:'/home'},
{name:'experiments',value:'winter-launch',Path:'/home'},
]
request.cookies.getAll('experiments') //experimentsのvlaueを返す
request.cookies.getAll()//上のgetAll('experiments')と同じ
delete(name):その名前のcookieを消去する
request.cookies.delete('experments')
has(name):その名前のcookieが存在するかをbool値で返す
request.cookies.has('experiments')
clear():set-cookie header をrequestから消す
request.cookies.clear()
NextResponse
- 従来のresponseには無かった、便利な機能が使える。
例えば
set(name,value),get(name),**getAll(name)**はNextRequestと同様
json():指定されたjsonの型を持つレスポンスを生成する
import {NextResponse} from 'next/server'
export async function GET(request:Request){
return NextResponse.json({error:'Internal Server Error'},{status:500})
// {error:'Internal Server Error'},{status:500}この型のjsonを返す
}
redirect():書かれたURLへ移動させるレスポンスを生成する
return NextResponse.redirect(new URL('/new',request.url))
URLは、NextResponse.redirect()メソッドで使用する前に作成、修正することができる。
下の例では、request.nextUrlプロパティをしようして現在のURLを取得して、それを変更して別のURLに移動させている
import {NextResponse} from 'next/server'
const loginUrl=new URL('/login', request.url) //現在のURLを取得
loginUrl.searchParams.set('from',request.nextUrl.pathname)
//searchParamsで取得してきて、そこに'from'をセットする
return NextResponse.redirect(loginUrl)
まとめ
NextRequest, NextResponseはrequest,responseには無かった機能をもつもの
参考情報:
Discussion