Go to Qiita Advent Calendar Top
LoginSignup
34
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Day 7

anyプロダクトチーム Advent Calendar 2025

@Rasukarusan(Rasukarusan)inany株式会社

AI時代の"引用経済"をつくる！Next.jsで試す HTTP 402

Last updated at Posted at 2025-12-06

こんにちは！any 株式会社でプロダクトチームに所属しているエンジニアのなおとぅ(@Rasukarusan)です！
この記事は、any Product Team Advent Calendar2025 シリーズ1の 7 日目の記事になります。

AI 時代の検索

AI便利ですね〜！2025年は誰が見ても“大AI時代”でしたね。
コーディング中はもちろん、普段の生活でも気づいたら Google を使わなくなっていました。最近はもう“ググって”いない方も多いのではないでしょうか。

技術の調べ物も、飲み会のお店探しも、とりあえず GPT に聞いています。最近の AI は Web 検索機能も備えており、引用元サイトもきちんと示してくれます。

使う側としては非常に便利でありがたいんですが、サイトを引用される側の立場で考えた時、「引用されたらお金が入るようになって欲しいな〜〜！」 と思ったりします。

「ググる時代」には広告によって収益化できていましたが、AI は引用して終わり。何も還元されません。 このままAI に搾取される人生になって良いのだろうか。否。

単純に個人がサイト課金システムを作るだけでは不十分で、もっと根本の仕組み、つまり 規格化された共通ルールが必要だと感じました。

HTTP 402 の再来

HTTP ステータスコードといえば、成功の「200」、ページが見つからない「404 Not Found」などがあります。
実はその中に、30 年間ずっと “Reserved（予約済み）” のまま眠っていた伝説のコード 402 (Payment Required) があるのをご存知でしょうか。

402 は本来「支払いが必要なときに返すコード」として用意されていましたが、共通の決済手段がなく、広告モデルが強かった時代では必要とされていませんでした。

しかし、いまは状況が大きく変わりつつあります。

  • AI が API を叩きつつ自動でページアクセスする時代
  • AI が Web 経済の主要プレイヤーになりつつある
  • 暗号資産やウォレット技術の進化により、AI が“財布”を持てる

こうした流れの中で、長らく忘れられていた HTTP 402 に再び注目が集まっています。

HTTP 402 の仕組み

402 の仕組みについては、Coinbase のドキュメント が非常に分かりやすいです。

以下がワークフローです。

めちゃめちゃシンプルですね！
リクエストヘッダーに x-payment（=決済トークン）が無い場合は 402 を返し、ヘッダーに決済トークンがあれば検証へ進む流れです。

この仕組みが標準化されれば、AI は「402 が返ってきたら手元のウォレットで支払う」という動作を自動で行えるようになります。

ちなみにブロックチェーン上のウォレットは鍵ペアを生成するだけなので、AI Agent が自動でウォレットを作るのも難しくありません。
イメージとしては「必要に応じて捨てられるデビットカード」を無制限に自動生成できる感じです。

Next.jsで実装してみる

実際にどんな流れになるのか、実装して確認してみましょう！

課金対象ページを作成する

まずは引用される想定のページ /protected_content を作ります。

app/protected_content/page.tsx
export default function ProtectedPage() {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="max-w-2xl mx-auto p-8">
        <h1 className="text-4xl font-bold mb-4">おめでとう！おめでとう！</h1>
        <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/r/rasukarusan/20251124/20251124141418.jpg" />
      </div>
    </div>
  );
}

image.png

うちの猫ちゃんですね！
まだ何もしていないのでそのままページが表示されます。

サーバー側の実装: proxy.ts(旧middleware.ts)

/protected_content へアクセスされた際、支払い済みかどうかを検証するための処理を追加します。

proxy.ts(旧middleware.ts)
import type { NextRequest } from 'next/server'
import { NextResponse } from 'next/server'

export async function proxy(req: NextRequest) {
  const paymentHeader = req.headers.get('x-payment')

  // 決済トークンなし → 402 と paymentRequirements を返す
  if (!paymentHeader) {
    const body = JSON.stringify({
      paymentRequirements: [
        {
          currency: 'USDC',
          chain: 'solana-devnet',
          amount: '0.50',
          recipient: 'YOUR_WALLET',
        },
      ],
    })

    return new NextResponse(body, {
      status: 402,
      headers: {
        'content-type': 'application/json',
        'cache-control': 'no-store',
      },
    })
  }

  // 決済トークンあり → 検証 API を叩く
  const res = await fetch(new URL('/api/verify', req.url), {
    method: 'POST',
    headers: {
      'content-type': 'application/json',
    },
    body: JSON.stringify({paymentHeader}),
  })

  if (!res.ok) {
    return new NextResponse('Payment verification failed', {
      status: 402,
      headers: {'cache-control': 'no-store'},
    })
  }
  // 検証OKの場合、コンテンツを表示
  return NextResponse.next()
}

仕組みとしては単純で、リクエストヘッダーに x-payment（=決済トークン）が無い場合は 402 を返し、ヘッダーがあるときのみトークン検証へ進むようになっています。
検証APIの具体的な処理内容は本題から逸れるため、ここでは詳細を割愛します。

では、実際に/protected_contentにアクセスしましょう。

screenshot_ 2025-11-20 19.00.45.png

ヘッダーに決済トークンを乗せていないので402 Payment Requiredが返ってきていますね！

コードで重要なところは下記です。決済に必要なパラメータとステータスコード402を返しています。

const body = JSON.stringify({
  paymentRequirements: [
    {
      currency: 'USDC',
      chain: 'solana-devnet',
      amount: '0.50',
      recipient: 'YOUR_WALLET',
    },
  ],
})

return new NextResponse(body, {
  status: 402,
  headers: {
    'content-type': 'application/json',
    'cache-control': 'no-store',
  },
})
  • currency: 通貨
  • chain: 利用するチェーン(BTC、ETH、BASEなど多様なチェーンが存在します)
  • amount: 価格（数量）
  • recipient: 受け取り手のウォレットのアドレス

クライアント側はこの決済パラメータを受け取り、決済を行います。

クライアントの実装：決済

では最後にクライアント側に決済手段を実装しましょう。ページにアクセスし、402が返ってきたら決済をできるようにします。
ここではCoinbase社が出している非常に便利なライブラリ「x402-next」を利用します。実はこのライブラリを使うと先ほどのproxy.tsの実装を変えるだけで、クライアント側にブロックチェーンを利用した決済手段を提供できます。

npm install x402-next
proxy.ts
import type { NextRequest } from "next/server";
import { Address } from "viem";
import { paymentMiddleware, Network, Resource } from "x402-next";

const facilitatorUrl = process.env.NEXT_PUBLIC_FACILITATOR_URL as Resource;
const payTo = process.env.RESOURCE_WALLET_ADDRESS as Address;
const network = (process.env.NETWORK || "solana-devnet") as Network;

const handler = paymentMiddleware(
  payTo,
  {
    "/protected_content": {
      price: "$0.50",
      network,
    },
  },
  {
    url: facilitatorUrl,
  },
);

export async function proxy(req: NextRequest) {
  return handler(req);
}
export const config = {
  matcher: "/protected_content/:path*",
};

この状態で/protected_contentにアクセスしてみると支払い画面が表示されます。

image.png

Connect walletボタンを押すとウォレット選択画面が出てきてます。

image.png

ウォレットを選択し、決済をします

image.png

決済が完了するとページが表示されます。

image.png

うちの猫ちゃんですね！

今回は人間がブラウザ経由でアクセスしたため、ウォレット選択画面が表示されました。しかし、AI Agent がアクセスする場合は画面表示は行われないため、返却される JSON の決済パラメータを基に支払い処理を実行する形になります。

実際にcurlでアクセスすると以下のようなレスポンスが返ってきます。

$ curl -s http://localhost:3000/protected_content | jq
{
  "x402Version": 1,
  "error": "X-PAYMENT header is required",
  "accepts": [
    {
      "scheme": "exact",
      "network": "solana-devnet",
      "maxAmountRequired": "10000",
      "resource": "http://localhost:3004/protected_content",
      "description": "Access to protected content",
      "mimeType": "",
      "payTo": "CkyxthCZQPAXccxk5zAi9giNa9jrrqAn8pfwVXKCq3ka",
      "maxTimeoutSeconds": 60,
      "asset": "4zMMC9srt5Ri5X14GAgXhaHii3GnPAEERYPJgZJDncDU",
      "outputSchema": {
        "input": {
          "type": "http",
          "method": "GET",
          "discoverable": true
        }
      },
      "extra": {
        "feePayer": "CKPKJWNdJEqa81x7CkZ14BVPiY6y16Sxs7owznqtWYp5"
      }
    }
  ]
}

補足： x402-nextは何をしているのか

このように「x402-next」が提供する paymentMiddleware を利用すると、支払いまわりのコードをほぼ書かずに実装できます。

「x402-next」 は 決済フローの UI と、支払い完了後に受け取るトークン処理をまとめて扱える Next.js 向け SDK です。

  • ウォレット接続 UI の表示
  • ユーザーまたは AI Agent に決済操作を促す
  • payment_session をもとに支払い用画面を生成
  • ブロックチェーン上で支払いが完了すると、“支払い済み” を証明するトークン（署名付き JWT）を受け取る
  • そのトークンを x-payment ヘッダーとしてリクエストに付与

という一連の流れを自動で面倒みてくれます。以下が x402-next のソースコードです。

個人的にありがたかったのは 決済手段の提供（ウォレット選択 UI）でした。
HTTP 402 の動作確認がしたいだけなのにウォレット連携を一から作るのは大変なので、UI部分を書かずに済むのはめちゃくちゃありがたいです。

標準化が待ち遠しい

現在 HTTP 402 はまだ標準化されていませんが、Coinbase 社が中心となってプロトコルの整備を進めています。
すでに MCP の実装例も公開されており、記事提供者側が今回のような HTTP 402 レスポンスを返す仕組みを用意していれば、適切に収益を受け取れる環境が整いつつあります。

とはいえ、本来は個人レベルで実装するものではなく、もっと上位レイヤーで扱われるべき領域だと思います。
Cloudflare 社も HTTP 402 の標準化に取り組んでいます。

将来的には Cloudflare 上で設定をひとつ ON にするだけで、自分の記事が自動的に課金対象になる、みたいなことができるのかもしれませんね！
一エンジニアとして、この先どのようなプロトコル仕様に落ち着くのか非常に楽しみです！

終わりに

HTTP 402 は長いあいだ未使用のステータスコードでしたが、AI Agent とブロックチェーンが普及した今、ようやく意味を持ち始めました。
もし 402 が広く標準化されれば、AI がコンテンツを引用するたびに適切な対価が返ってくる Web が実現します。
広告に頼らない新しい収益モデルとしても、とても面白い可能性を秘めています。

AI に引用される機会が増え、気づいたら大きな収益になっていた──そんな未来が来ると嬉しいですね！🚀

今回実装したソースは以下になります！

any株式会社ではナレッジ経営クラウドQastのエンジニアを絶賛募集中です。
是非採用ページをご覧ください！

エンジニア組織/文化について詳しく知りたい方はこちら

34
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
34
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?