NextResponse
NextResponse は、Web Response API を、便利な追加メソッドで拡張したものです。
cookies
レスポンスの ヘッダーを読み取ったり変更したりします。Set-Cookie
set(name, value)
名前を指定して、指定された値を持つCookieをレスポンスに設定します。
// 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 responseget(name)
クッキー名を指定すると、そのクッキーの値が返されます。クッキーが見つからない場合は undefined が返されます。複数のクッキーが見つかった場合は、最初のものが返されます。
// Given incoming request /home
let response = NextResponse.next()
// { name: 'show-banner', value: 'false', Path: '/home' }
response.cookies.get('show-banner')getAll()
Cookie名を指定すると、レスポンス内のCookieの値が返されます。名前が指定されていない場合は、レスポンス内のすべてのCookieが返されます。
// 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)
Cookie名を指定すると、レスポンスからCookieが削除されます。
// Given incoming request /home
let response = NextResponse.next()
// Returns true for deleted, false if nothing is deleted
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 })
}redirect()
URL にリダイレクトするレスポンスを生成します。
import { NextResponse } from 'next/server'
return NextResponse.redirect(new URL('/new', request.url))NextResponse.redirect() メソッドで使用する前に、URL を作成・変更できます。例えば、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 } }) を使用して、レスポンス生成時にヘッダーをアップストリームに転送することもできます。
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,
},
})
}役に立ちましたか?