recipes / add-cms-resource

CMS リソースを1つ追加する

ResourceSchema を1つ宣言して、一覧/編集/保存/CSV インポートが動く admin 画面を得る

前提: new-event解説 ch.13

CMS は schema 駆動。ResourceSchema を1つ足すだけで CRUD 画面が生える。

1. schema を registry に足す

apps/<app>/src/lib/cms.tscreateResourceRegistry([...]) に ResourceSchema を追加する。 例: FAQ(list リソース):

const FAQ_SCHEMA: ResourceSchema = {
  name: "faqs",
  label: "FAQ",
  shape: "list",
  primaryLabel: "question",
  orderField: "order",
  defaultItem: { visible: true },
  csvImport: {
    help: "列順: question<TAB>answer",
    headers: ["question", "answer"],
  },
  fields: [
    { type: "number", name: "order", label: "並び順" },
    { type: "text", name: "question", label: "質問", required: true },
    { type: "markdown", name: "answer", label: "回答", rows: 6 },
    { type: "boolean", name: "visible", label: "公開する" },
  ],
};

そして createResourceRegistry([NEWS_SCHEMA, SETTINGS_SCHEMA, FAQ_SCHEMA]) に加える。

2. 初期データ(任意)

apps/<app>/content/faqs.json[] か初期配列を置く。

3. 確認

/admin/cms/faqs を開く(SplitView が自動で出る)。+ 追加 / 検索 / CSV / 保存 が動く。

フィールド型の一覧

text / textarea / markdown / svg / number / select / multiselect / boolean / color / image / datetime / stringList / array。 装飾: locked(4S 所有・二層防御で編集不可)/ advanced(折りたたみ)。 キーは dot-path 可(geo.lat / socialUrls.x)。

LP に出すときは publicFields(allowlist)を宣言し pickPublicFields(schema, item) を通す。

本番保存

dev は content/ に fs 書き込み。本番は GITHUB_TOKEN + GITHUB_REPO_OWNER + GITHUB_REPO_NAME を設定すると Octokit commit → Vercel 再ビルドで反映される(sha256 楽観ロック付き)。