NextResponseの使い方：JSON・Cookie・リダイレクトを返す
NextResponseでレスポンスを作る方法を紹介します。JSON本文、ステータス、ヘッダー、レスポンスCookieを1つの例で理解します。
NextResponseでレスポンスを作る方法を紹介します。JSON本文、ステータス、ヘッダー、レスポンスCookieを1つの例で理解します。
対象環境と役割
App Routerで使う機能
この記事のApp Routerの例はNext.js 15以降の非同期リクエストAPIに合わせた書き方です。Next.js 16ではCache Componentsを有効にしない構成を前提とします。Pages Routerの記事とは配置先・実行場所が異なるため、プロジェクトのルーターとバージョンを先に確認してください。
TypeScriptの例は5.2以降と、利用するNext.jsが対応するNode.jsを前提にします。app/layout.tsx を備えたApp Routerプロジェクトで実行してください。
引数・戻り値・受け渡すデータ
NextResponse.json(data, init) はJSONレスポンスを生成します。生成したレスポンスの cookies.set でCookie保存を指示し、最後にそのレスポンス自体をreturnします。
コード例を動かす
app/api/theme/route.ts を作成する
以下はこのファイルとして配置する例です。既存ファイルへ追記する場合は、同じ名前のexportやURLが重複しないように統合してください。
import { NextResponse } from 'next/server';
export async function POST(request: Request) {
let body: unknown;
try { body = await request.json(); }
catch { return NextResponse.json({ error: 'JSONの形式が不正です' }, { status: 400 }); }
if (typeof body !== 'object' || body === null || !('theme' in body) ||
(body.theme !== 'light' && body.theme !== 'dark')) {
return NextResponse.json({ error: 'themeはlightまたはdarkです' }, { status: 422 });
}
const response = NextResponse.json({ theme: body.theme }, { headers: { 'Cache-Control': 'no-store' } });
response.cookies.set('theme', body.theme, {
path: '/', httpOnly: true, sameSite: 'lax',
secure: process.env.NODE_ENV === 'production', maxAge: 60 * 60 * 24,
});
return response;
}実行結果と処理の順序
themeがlightまたはdarkならJSONを返し、Set-Cookieをレスポンスへ付けます。ブラウザーは次のリクエストでCookieを送るため、サーバー側の cookies() で読み取れます。
HttpOnlyを指定しているのでブラウザーのJavaScriptから document.cookie でこの値を読む設計ではありません。本番ではSecureを有効にしてHTTPSで運用します。
つまずきやすい点と使い分け
設定したレスポンスを返す
Cookie設定後に新しいResponseを作って返すと、設定したCookieが失われます。生成・変更・returnを同じオブジェクトで完結させます。
redirect・rewrite・nextを混同しない
redirectは利用者を別URLへ移動させます。rewriteは主にProxyなどで転送先を変え、nextは後続処理へ渡す用途です。Route HandlerのJSON返却でnextを使うわけではありません。
静的出力で使えるか
この例はリクエストごとのサーバー処理を必要とします。output: 'export' で生成した out を配信するだけのサーバーでは実行できません。Next.jsのサーバー実行環境か別のAPIを用意します。
確認課題と実務への応用
自分で値を変えて確認する
POSTにdarkを送り、開発者ツールのネットワークとCookie保存領域で確認します。値を削除する場合もpathなどの条件を揃えて失効させます。この例は表示設定用であり、ログインセッションの実装例ではありません。
開発サーバーだけでなく、本番用ビルドと公開先でも確認します。URLを直接開く場合と画面内のリンクから遷移する場合、値がない場合と不正な値の場合を分けて試すと、型だけでは防げない入力の問題が見つかります。
公式資料と関連する記事
Googleの優先するニュース提供元にSEの部屋を追加
Googleで、いつも読みたい情報源を選べます。登録可否はGoogleの画面で確認できます。
候補にSEの部屋が表示されない場合は、まだ追加できません。