︙

NextResponse

NextResponse は、追加の便利な Method を用いてWeb Response API を拡張します。

`cookies`

Set-Cookie の response の header を読み込むか変更します。

`set(name, value)`

名前が与えられた場合、与えられた value を使用して、response 上に 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 response;

`get(name)`

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

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

`getAll()`

cookie の名前が与えられた場合、その cookie の値を返します。名前が与えられていない場合、response にあるすべての cookies を返します。

// 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 を response から delete してください。

// Given incoming request /home
let response = NextResponse.next();
// Returns true for deleted, false is nothing is deleted
response.cookies.delete("experiments");

`json()`

指定された JSON 本文で response を生成してください。

app/api/route.ts

import { NextResponse } from 'next/server'

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

app/api/route.js

import { NextResponse } from 'next/server'

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

`redirect()`

URL への redirects を行う response を生成します。

import { NextResponse } from "next/server";

return NextResponse.redirect(new URL("/new", request.url));

URL は、NextResponse.redirect() method を使用する前に作成および変更することができます。例えば、現在の URL を取得するためにrequest.nextUrlプロパティを使用し、それを別の URL に redirect させるために変更することができます。

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 を(プロキシとして)rewrites response を生成しながら、元の 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() method は、早期に戻りルーティングを続けることを可能にするため、Middleware にとって有用です。

import { NextResponse } from "next/server";

return NextResponse.next();

また、response を生成するときに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");
// And produce a response with the new headers
return NextResponse.next({
  request: {
    // New request headers
    headers: newHeaders,
  },
});