プラグインと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

lib/client.ts

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"];
      },
    }),
  ],
});

app/api/revalidate/route.ts

import { genko } from "@/lib/client";

export const POST = genko.revalidate.POST;

管理画面のWebhookに設定したシークレットと、GENKO_WEBHOOK_SECRETを一致させます。空のシークレットではクライアント初期化時にエラーになります。

署名が一致するとコールバックを実行し、返された各パスについて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は配列の先頭ほど外側から実行されます。
キャッシュやリトライを追加する場合は、プレビューの分離と再試行上限も設計してください。

プラグインとNext.js連携

プレビュー：nextPreview

再検証：nextRevalidate

独自のプラグイン

目次