🏈

Sanity Studioを使ってコンテンツを管理

2024/02/24に公開

Sanityとは

クラウドベースのHeadless CMSであり、Sanity Cloud（Content Lake）とSanity Studioが同期され、クラウドにあるデータを編集できるようにするAPIクライアントアプリです。スタジオで表示されるリストはJavaScriptの文法を使用してカスタマイズ可能で、扱いやすいです。Reactで作られており、機能を追加したり、ライブラリを使用して拡張することが可能です。（管理者のようにデプロイして使用することもできます）。

スキーマ管理
コンテンツデータ管理

Schemaとは?

スキーマ(Schema)は、データベースの構造と制約条件に関する全般的な仕様を記述したものです。データベース内にどのような構造でデータが保存されるかを示すデータベース構造をスキーマ(Schema)と呼びます。

Sanity 設定方

https://www.sanity.io/
公式サイトに入ってGet startedをクリックします。

ログインすると、さまざまな設定を求めるページが表示されます。
自分のプロジェクトに合わせて設定します。

設定すると、このように表示されますが、すでにプロジェクトがある場合は Add to existing Next.js app にあるコードを使用し、プロジェクトがない場合は Initialize a new project にあるコードをインストールしてください！

next project内部に設置完了！

Sanity プレビューの修正方法

データをより効果的に見るために、Sanityのプレビューを修正することができます。

sanity-studio/schemaTypes/post.js

  preview: {
    select: {
      title: 'comments.0.comment',
      authorName: 'author.name',
      authorUsername: 'author.username',
      image: 'photo',
    },
    prepare(selection) {
      const {title, authorName, authorUsername, image} = selection
      return {
        title,
        subtitle: `by ${authorName}(${authorUsername})`,
        image,
      }
    },
  },

Sanityとは

Schemaとは?

Sanity 設定方

Sanity プレビューの修正方法

Discussion