コンテンツにスキップ

NextResponse

NextResponse は、追加の便利なメソッドを備えた Web Response API を拡張します。

cookies

レスポンスの Set-Cookie ヘッダーを読み取るか、変更します。

set(name, value)

指定された名前と値で、レスポンスにクッキーを設定します。

// Given incoming request /home
let response = NextResponse.next()
// Set a cookie to hide the banner
response.cookies.set('show-banner', 'false')
// Response will have a `Set-Cookie:show-banner=false;path=/home` header
return response

get(name)

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

// Given incoming request /home
let response = NextResponse.next()
// { name: 'show-banner', value: 'false', Path: '/home' }
response.cookies.get('show-banner')

getAll()

クッキー名を指定すると、そのクッキーの値が返されます。名前が指定されていない場合は、レスポンス内のすべてのクッキーが返されます。

// Given incoming request /home
let response = NextResponse.next()
// [
//   { name: 'experiments', value: 'new-pricing-page', Path: '/home' },
//   { name: 'experiments', value: 'winter-launch', Path: '/home' },
// ]
response.cookies.getAll('experiments')
// Alternatively, get all cookies for the response
response.cookies.getAll()

delete(name)

クッキー名を指定すると、レスポンスからそのクッキーが削除されます。

// Given incoming request /home
let response = NextResponse.next()
// Returns true for deleted, false if nothing is deleted
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'
 
// Given an incoming request...
const loginUrl = new URL('/login', request.url)
// Add ?from=/incoming-url to the /login URL
loginUrl.searchParams.set('from', request.nextUrl.pathname)
// And redirect to the new URL
return NextResponse.redirect(loginUrl)

rewrite()

元の URL を維持しながら、指定された URL を書き換える(プロキシする)レスポンスを生成します。

import { NextResponse } from 'next/server'
 
// Incoming request: /about, browser shows /about
// Rewritten request: /proxy, browser shows /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'
 
// Given an incoming request...
const newHeaders = new Headers(request.headers)
// Add a new header
newHeaders.set('x-version', '123')
// Forward the modified request headers upstream
return NextResponse.next({
  request: {
    // New request headers
    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)
  // DO NOT forward headers like this
  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()
    // Keep only known-safe headers, discard custom x-* and other sensitive ones
    if (
      !headerName.startsWith('x-') &&
      headerName !== 'authorization' &&
      headerName !== 'cookie'
    ) {
      // Preserve original header name casing
      forwarded.set(name, value)
    }
  }
 
  return NextResponse.next({
    request: {
      headers: forwarded,
    },
  })
}