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ボディを含むレスポンスを生成します。

app/api/route.ts

TypeScript

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 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()メソッドはProxyに役立ち、早期に戻ってルーティングを続行できます。

import { NextResponse } from 'next/server'
 
return NextResponse.next()

NextResponse.next({ request: { headers } })を使用して、レスポンスを生成する際に上流にheadersを転送することもできます：

import { NextResponse } from 'next/server'
 
// 受信リクエストを指定...
const newHeaders = new Headers(request.headers)
// 新しいヘッダーを追加
newHeaders.set('x-version', '123')
// 変更されたリクエストヘッダーを上流に転送
return NextResponse.next({
  request: {
    // 新しいリクエストヘッダー
    headers: newHeaders,
  },
})

これはnewHeadersを上流のターゲットページ、ルート、またはサーバーアクションに転送し、クライアントには公開しません。このパターンはデータを上流に渡す場合に役立ちますが、このデータを含むヘッダーが外部サービスに転送される可能性があるため、注意して使用する必要があります。

対照的に、NextResponse.next({ headers })はプロキシからクライアントへのヘッダー送信の略記です。これは推奨されない慣行であり、避けるべきです。その他の理由の中でも、Content-Typeなどのレスポンスヘッダーを設定すると、フレームワークの予期（例えば、Server Actionsで使用されるContent-Type）をオーバーライドし、送信失敗やストリーミングレスポンスの破損につながる可能性があります。

import { type NextRequest, NextResponse } from 'next/server'
 
async function proxy(request: NextRequest) {
  const headers = await injectAuth(request.headers)
  // このようにヘッダーを転送しないでください
  return NextResponse.next({ headers })
}

一般的には、すべての受信リクエストヘッダーをコピーすることは避けてください。これを行うと、敏感なデータがクライアントまたは上流サービスに漏洩する可能性があります。

許可リストを使用して受信リクエストヘッダーのサブセットを作成することで、防御的なアプローチが推奨されます。例えば、カスタムx-*ヘッダーを破棄し、既知の安全なヘッダーのみを転送できます：

import { type NextRequest, NextResponse } from 'next/server'
 
function proxy(request: NextRequest) {
  const incoming = new Headers(request.headers)
  const forwarded = new Headers()
 
  for (const [name, value] of incoming) {
    const headerName = name.toLowerCase()
    // 既知の安全なヘッダーのみを保持し、カスタム x-* および他の敏感なヘッダーを破棄
    if (
      !headerName.startsWith('x-') &&
      headerName !== 'authorization' &&
      headerName !== 'cookie'
    ) {
      // 元のヘッダー名の大文字小文字を保持
      forwarded.set(name, value)
    }
  }
 
  return NextResponse.next({
    request: {
      headers: forwarded,
    },
  })
}