Next.jsとカスタムサイト（webhook）

サイトがNext.jsアプリやヘッドレスのフロントエンドなど、コンテンツAPIを持たない構成の場合、Clodixは公開した各記事を、指定したURLへ JSONとしてPOST できます。独自に構築したサイトにはこの連携を使います。ZapierやMakeのトリガーとしても便利です。

連携する

1. Settings → Publishing integrations を開き、Next.js / Webhook をクリックします。
2. 次の項目を入力します。
   • Webhook URL — POSTリクエストを受け付ける、サーバー上の https:// アドレスです。
   • Signing secret（任意） — 設定すると、Clodixがすべてのリクエストに署名します。リクエストが本当にClodixから届いたことを検証できます。
3. Connect をクリックします。Clodixはすぐにテスト用のpingを送信します。連携を成功させるには、エンドポイントが2xxのステータスで応答する 必要があります。

ペイロード

すべてのリクエストは、content-type: application/json ヘッダー付きのJSONとして POST されます。エンベロープには必ず event フィールドがあり、本文の形式はイベントによって異なります。

article.published — 記事が公開されたときに送信されます。

{
  "event": "article.published",
  "article": {
    "title": "Best pour over coffee makers in 2026",
    "slug": "best-pour-over",
    "bodyHtml": "<p>...</p>",
    "metaDescription": "A guide to the best pour over coffee makers.",
    "imageUrl": "https://cdn.clodix.ai/covers/best-pour-over.jpg",
    "publishedAt": "2026-08-01T10:00:00.000Z"
  }
}

metaDescription、imageUrl、publishedAt は、記事にそれらがある場合にのみ含まれます。

article.unpublished — 記事を非公開にしたときに送信されます。

{ "event": "article.unpublished", "article": { "slug": "best-pour-over" } }

clodix.ping — Connectをクリックしたときに一度だけ送信される、接続テストです。

{ "event": "clodix.ping" }

ヘッダー

ヘッダー	値
content-type	application/json
x-clodix-event	本文の event フィールドと同じ値。
x-clodix-signature	署名シークレットを設定した場合にのみ送信されます。以下をご覧ください。

署名を検証する

署名シークレットを設定すると、Clodixはそのシークレットをキーとして、リクエスト本文のそのままの生データ をHMAC-SHA256で署名し、x-clodix-signature: sha256=<hex digest> として送信します。

// app/api/clodix/route.ts
import { createHmac, timingSafeEqual } from "crypto";
import { NextRequest, NextResponse } from "next/server";

const SECRET = process.env.CLODIX_WEBHOOK_SECRET!;

export async function POST(req: NextRequest) {
  const rawBody = await req.text(); // read as text BEFORE parsing JSON
  const signature = req.headers.get("x-clodix-signature") ?? "";

  const expected =
    "sha256=" + createHmac("sha256", SECRET).update(rawBody).digest("hex");

  const ok =
    signature.length === expected.length &&
    timingSafeEqual(Buffer.from(signature), Buffer.from(expected));

  if (!ok) {
    return NextResponse.json({ error: "invalid signature" }, { status: 401 });
  }

  const payload = JSON.parse(rawBody);
  // payload.event is "article.published" | "article.unpublished" | "clodix.ping"
  // ... upsert payload.article into your database/CMS by slug ...

  return NextResponse.json({ ok: true });
}

2xxで応答する

Clodixが公開を成功と見なすには、エンドポイントが成功ステータス（200～299）で応答する必要があります。接続テストも同様です。2xx以外の応答（または応答なし）は公開の失敗として扱われ、記事はClodixで下書きのまま残ります。接続画面（または記事のPublishボタン）には、エンドポイントが実際に返したステータスが表示されます。

エンドポイントは、標準のウェブポート（:port を付けない https://… または http://…）で、公開されたアドレスである必要があります。ローカルネットワークやプライベートネットワーク上のアドレス、またはそこへリダイレクトされるアドレスは、何かを送信する前に「This address isn't reachable from Clodix」として拒否されます。

公開URLを返す（任意）

エンドポイントが { "url": "https://yoursite.com/blog/best-pour-over" } を返すと、Clodixはそれを記事の公開URLとして保存し、検索エンジンに新しいページであることを通知する際に使用します。これは任意で、エンドポイントはURLなしで { "ok": true } を返すだけでも構いません。

FAQ

署名シークレットは必要ですか？

任意ですが、外部に公開されるものには推奨します。URLを推測した第三者ではなく、リクエストが本当にClodixから届いたことをエンドポイントが確認できる、唯一の方法です。

Clodixが公開しようとしたときにサーバーがダウンしていたらどうなりますか？

公開は失敗し、記事は下書きのまま残ります。Clodixがその後どう動くか、安全に再試行するにはどうすればよいかは、公開に関する問題 をご覧ください。

自社サーバーの代わりに、ZapierやMakeで使えますか？

はい。ZapierやMakeが「Catch Hook」／「Custom Webhook」トリガー用に発行するwebhook URLを Webhook URL フィールドに貼り付け、そこから自動化を組み立ててください。

関連ページ

• ウェブサイトを連携する
• 公開に関する問題
• 記事を公開する