NextResponse

NextResponse は Web レスポンス API に便利なメソッドを追加して拡張しています。

---

cookies

レスポンスのSet-Cookieヘッダーを取得、または変更します。

set(name, value)

指定した名前を持つクッキーをレスポンスに設定します。

// /home へのリクエストが来た場合
let response = NextResponse.next()
// バナーを隠すためのクッキーをセットする
response.cookies.set('show-banner', 'false')
// レスポンスには`Set-Cookie:show-banner=false;path=/home` ヘッダーがセットされる
return response

get(name)

クッキー名が与えられたら、そのクッキーの値を返します。クッキーが見つからない場合は、undefinedが返されます。複数のクッキーが見つかった場合は、最初のものが返されます。

// /home へのリクエストが来た場合
let response = NextResponse.next()
// { name: 'show-banner', value: 'false', Path: '/home' }
response.cookies.get('show-banner')

getAll()

クッキー名が与えられた場合、そのクッキーの値を返します。名前が与えられない場合は、レスポンスに含まれるすべてのクッキーを返します。

// /home へのリクエストが来た場合
let response = NextResponse.next()
// [
//   { name: 'experiments', value: 'new-pricing-page', Path: '/home' },
//   { name: 'experiments', value: 'winter-launch', Path: '/home' },
// ]
response.cookies.getAll('experiments')
// または、レスポンスの全てのクッキーを取得する
response.cookies.getAll()

delete(name)

クッキー名を指定し、そのクッキーをレスポンスから削除します。

// /home へのリクエストが来た場合
let response = NextResponse.next()
// 削除されたら true、削除されなかったら false を返す
response.cookies.delete('experiments')

json()

指定されたJSONボディを持つレスポンスを生成します。

app/api/route.ts

import { NextResponse } from 'next/server'

export async function GET(request: Request) {
  return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 })
}

redirect()

URL にリダイレクトするレスポンスを生成します。

import { NextResponse } from 'next/server'

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)
// /login に ?from=/incoming-url を追加する
loginUrl.searchParams.set('from', request.nextUrl.pathname)
// 新しいURLにリダイレクトする
return NextResponse.redirect(loginUrl)

rewrite()

元のURLを保持したまま、指定されたURLを書き換える（プロキシする）レスポンスを生成します。

import { NextResponse } from 'next/server'

// /about へのリクエストは ブラウザでは /about を表示する
// リクエストを /proxy に書き換えるとブラウザでは /about を表示する
return NextResponse.rewrite(new URL('/proxy', request.url))

next()

next()メソッドは Middleware として利用でき、早期リターンまたはルーティングを継続できます。

import { NextResponse } from 'next/server'

return NextResponse.next()

レスポンスを生成する際にheadersをフォワードできます。

import { NextResponse } from 'next/server'

// リクエストが来たら...
const newHeaders = new Headers(request.headers)
// 新しいヘッダーを作り
newHeaders.set('x-version', '123')
// そのヘッダーでレスポンスを生成する
return NextResponse.next({
  request: {
    // New request headers
    headers: newHeaders,
  },
})