NextRequestの使い方：URL・Cookie・本文から入力を取り出す
NextRequestはWeb標準のRequestを拡張するAPIです。nextUrlで検索条件を読み、CookieとJSON本文の扱い、入力検証の境界を学びます。
NextRequestはWeb標準のRequestを拡張するAPIです。nextUrlで検索条件を読み、CookieとJSON本文の扱い、入力検証の境界を学びます。
対象環境と役割
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プロジェクトで実行してください。
引数・戻り値・受け渡すデータ
Route Handlerの引数を NextRequest として受け取れます。request.nextUrl はURL情報、request.cookies は受信Cookie、request.json() は非同期の本文解析です。
コード例を動かす
app/api/search-demo/route.ts を作成する
以下はこのファイルとして配置する例です。既存ファイルへ追記する場合は、同じ名前のexportやURLが重複しないように統合してください。
import type { NextRequest } from 'next/server';
export async function GET(request: NextRequest) {
const terms = request.nextUrl.searchParams.getAll('q');
if (terms.length > 1) return Response.json({ error: 'qは1つだけ指定できます' }, { status: 400 });
const q = (terms[0] ?? '').trim();
if (q.length > 80) return Response.json({ error: 'qが長すぎます' }, { status: 400 });
return Response.json({ query: q, count: q.length }, { headers: { 'Cache-Control': 'no-store' } });
}実行結果と処理の順序
/api/search-demo?q=react はqueryにreact、countに5を返します。検索エンジンへの接続例ではなく、入力を検証する小さなAPIです。
本文解析が必要なPOSTでは await request.json() や await request.formData() を使います。本文ストリームを繰り返し読めると考えず、必要な解析を1回行って結果を利用します。
つまずきやすい点と使い分け
受信Cookieを書き換えても保存指示とは別
request.cookiesは受信した値を扱います。ブラウザーへCookieを保存させるには、返却するResponseのSet-Cookieを設定します。NextRequestとNextResponseの方向を分けて考えます。
型で認証はできない
NextRequestという型が付いても、検索条件やヘッダーが信頼できる情報に変わるわけではありません。秘密値をURLに入れないことや、DBへ渡す際のパラメーター化も必要です。
静的出力で使えるか
この例はリクエストごとのサーバー処理を必要とします。output: 'export' で生成した out を配信するだけのサーバーでは実行できません。Next.jsのサーバー実行環境か別のAPIを用意します。
確認課題と実務への応用
自分で値を変えて確認する
qなし、前後の空白、qの重複、81文字で結果を比較します。絵文字のlengthは見た目の文字数と一致しない場合があるため、実際の要件が文字数かバイト数かも決めてください。
開発サーバーだけでなく、本番用ビルドと公開先でも確認します。URLを直接開く場合と画面内のリンクから遷移する場合、値がない場合と不正な値の場合を分けて試すと、型だけでは防げない入力の問題が見つかります。
公式資料と関連する記事
Googleの優先するニュース提供元にSEの部屋を追加
Googleで、いつも読みたい情報源を選べます。登録可否はGoogleの画面で確認できます。
候補にSEの部屋が表示されない場合は、まだ追加できません。