インストール

npm create sanity@latest

install後、ダッシュボードのCORSオリジンに http://localhost:3000/ を追加
http://localhost:3000/studio/ がコンテンツの管理画面

sampleTypeの例

sanity /schemaTypes /sample.ts：モデルの作成

export const sampleType = defineType({
  name: "sampleData",
  title: "SampleData",
  type: "document",
  icon: DocumentTextIcon,
  fields: [
    defineField({
      name: "title",
      type: "string",
    }),
    defineField({
      name: "description",
      type: "string",
    }),
  ],
});

sanity/ schemaTypes/ index.js ：モデルをimport

import { sampleType } from "./";

export const schema = {
  types: [sampleType], // 作成したモデルを追加
};

sanity/ structure.js ：

デモデータのタイプやtitleを自分のものに変更
structure.jsを使わなくてもデータの操作はできる

ルートのsanity.config：

いじらなくてもよい

データの取得

fetchData.js：

export async function fetchSampleData() {
  const query = '*[_type == "sampleData"]';
  const data = await client.fetch(query);
  return data;
}

'*[_type == "sampleData"]' ：_typeは、defineTypeして作成したモデルのname

画像の表示

typeに追加：

    defineField({
      name: "sampleImage",
      type: "image",
    }),

      {sampleData.map((data) => (
        <>
          {data.title}
          {data.description}
          {data.sampleImage ? (
            <Image
              src={urlFor(data.sampleImage)?.url()}
              alt={data.title}
              width={100}
              height={100}
            />
          ) : (
            <p>No image available</p>
          )}
        </>
      ))}

urlを生成するurlFor関数は、デモデータに入っている

Sanity：memo