NextResponse

NextResponse は Web Response 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 ボディでレスポンスを生成します。

import { NextResponse } from 'next/server'

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

import { NextResponse } from 'next/server'

export async function GET(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 URL に ?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() メソッドはミドルウェアで有用で、早期に返してルーティングを続行できます。

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: {
    // 新しいリクエストヘッダー
    headers: newHeaders,
  },
})

On this page