プラグインとNext.js連携
プレビュー、Webhookによる再検証、独自プラグインの追加方法。
createGenkoのpluginsに機能を追加すると、genko.previewやgenko.revalidateから利用できます。Next.js App Router向けのプラグインは@genko-me/sdk/nextからimportします。
Next.jsを使わないアプリは、このサブパスをimportする必要はありません。SDK本体のデータ取得はフレームワークに依存しません。
List / Viewで導入する場合、プレビュー用プラグインは不要です。通常のページにViewを置き、searchParamsを渡す手順は下書きプレビューを参照してください。以下は取得処理や連携ルートを自分で管理する場合の補助機能です。
プレビュー：nextPreview
import { nextPreview } from "@genko-me/sdk/next";
const preview = nextPreview({ redirectTo: (id, key) => `/blog/${encodeURIComponent(id)}?draftKey=${encodeURIComponent(key)}`, enableDraftMode: true,});| 設定 | 内容 |
|---|---|
redirectTo | IDとキーから、サイト内の移動先を返す関数 |
enableDraftMode | Next.jsのDraft Modeを有効にするか。既定はtrue |
提供されるGETは、URLからidとdraftKeyを読み、必要ならDraft Modeを有効にして307でリダイレクトします。パラメータがない場合は400です。
この処理だけで記事を取得したり、キーの正しさを確認したりはしません。移動先でdraftKeyを取得メソッドに渡します。下書きプレビューに完成形を掲載しています。
再検証：nextRevalidate
import { createGenko } from "@genko-me/sdk";import { nextRevalidate } from "@genko-me/sdk/next";import { blog } from "./schema";
export const genko = createGenko({ workspace: "your-workspace", apiKey: process.env.GENKO_API_KEY!, apis: { blog }, plugins: [ nextRevalidate({ secret: process.env.GENKO_WEBHOOK_SECRET!, revalidate: (event) => { if (event.api !== "blog" || event.workspace !== "your-workspace") return []; if (event.event === "webhook.test") return ["/blog"]; return event.entry ? ["/blog", `/blog/${event.entry.id}`] : ["/blog"]; }, }), ],});import { genko } from "@/lib/client";
export const POST = genko.revalidate.POST;管理画面のWebhookに設定したシークレットと、GENKO_WEBHOOK_SECRETを一致させます。空のシークレットではクライアント初期化時にエラーになります。
プラグインはx-genko-timestampのUnix秒と生のリクエスト本文を<timestamp>.<raw body>として連結し、x-genko-signatureのsha256=HMAC-SHA256(secret, ...)を検証します。時刻の許容差は既定で300秒で、nextRevalidateのtoleranceSecondsで変更できます。SDK 0.6.0は両方のヘッダーを必須とし、以前の本文だけを使う署名は受け付けません。
署名が一致するとコールバックを実行し、返された各パスについてrevalidatePath()を呼び出します。成功時は{ "revalidated": ["/blog"] }のようなJSONを返します。署名または時刻がない場合や不正な場合は401です。
このプラグインはキャッシュの作成やホスティング先の再ビルドまでは行いません。アプリがキャッシュする対象と、再検証するパスを合わせてください。Webhookの配送はWebhookを参照してください。
独自のプラグイン
プラグインには固有のidを付けます。extendでクライアントに機能を追加し、wrapRequestでHTTP処理を包めます。
import type { GenkoPlugin } from "@genko-me/sdk";
export function timingPlugin(): GenkoPlugin<"timing", undefined> { return { id: "timing", wrapRequest: (next) => async (path, query) => { const started = Date.now(); const response = await next(path, query); console.log("genko request", response.status, Date.now() - started); return response; }, };}plugins: [timingPlugin()]として追加します。この例は認証情報やプレビューキーをログに出さず、結果と時間だけを記録します。
idの重複と、予約名apis／clientは使用できません。extendの返り値はgenko.<id>から利用できます。wrapRequestは配列の先頭ほど外側から実行されます。- キャッシュやリトライを追加する場合は、プレビューの分離と再試行上限も設計してください。
最終更新: 2026年10月16日