Sanity

概要

Fumadocs は、Sanity CMS のセットアップを簡単にする公式インテグレーションを提供しています。

パフォーマンスを損なうことなく、ネイティブなライブプレビューを利用できます。

Sanity のサンプルは GitHub で公開しています。

セットアップ

このガイドでは、Sanity の公式ドキュメントに従って、すでに設定が完了していることを前提としています。

データ型

次のコマンドを実行して、コンテンツタイプを初期化します。

npx @fumadocs/cli add sanity/base

または、npx @fumadocs/cli add を実行して、ほかの Sanity プリセットを一覧から選んでインストールすることもできます。

インストールした型を登録します。

import { docsType, blockContent, callout, card, cards } from '@/lib/sanity/base';

export const schemaTypes = [blockContent, callout, card, cards, docsType];

コンテンツローダー

インテグレーションをインストールします。

npm i @fumadocs/sanity

ライブプレビューを使う場合は next-sanity/live の sanityFetch で、それ以外の場合は Sanity クライアントでソースを作成します:

lib/source.ts

import { dynamicLoader } from 'fumadocs-core/source';
import { createSanitySource } from '@fumadocs/sanity';
// ライブプレビュー用クライアント
import { sanityFetch } from '@/sanity/lib/live';
// 生成された型
import type { Docs } from '@/sanity/types';

const source = dynamicLoader(
  createSanitySource<Docs>({
    sanityFetch,
    docType: 'docs',
  }),
  {
    baseUrl: '/docs',
  },
);

export async function getSource() {
  return source.get();
}

sanityFetch を使用する場合、コンテンツが変更されると <SanityLive /> がクエリを再検証するため、invalidate() を呼び出さなくてもライブ更新とドラフトモードが機能します。

Cache Components を有効にしている場合、sanityFetch には 'use cache' スコープが必要なため、getSource() はそのスコープ内(例: キャッシュされたページ)で呼び出してください。

次に、getSource() 関数を使ってページをレンダリングします:

app/docs/[[...slug]]/page.tsx

import { notFound } from 'next/navigation';
import { DocsBody, DocsDescription, DocsPage, DocsTitle } from 'fumadocs-ui/layouts/docs/page';
import { getSource } from '@/lib/source';
import { CustomPortableText } from '@/components/sanity';

export default async function Page(props: PageProps<'/docs/[[...slug]]'>) {
  const params = await props.params;
  const source = await getSource();
  const page = source.getPage(params.slug);
  if (!page) notFound();

  const { renderToc, body } = await page.data.load();

  return (
    <DocsPage toc={renderToc({ render: (block) => <CustomPortableText value={block} /> })}>
      <DocsTitle>{page.data.title}</DocsTitle>
      <DocsDescription>{page.data.description}</DocsDescription>
      <DocsBody>
        <CustomPortableText value={body!} />
      </DocsBody>
    </DocsPage>
  );
}

完了

Studio エディターで docs タイプのドキュメントを作成すると、docs ルートに表示されるようになります。

概要アンカーリンクをコピー

セットアップアンカーリンクをコピー

データ型アンカーリンクをコピー

コンテンツローダーアンカーリンクをコピー

完了アンカーリンクをコピー

このページの内容

概要

セットアップ

データ型

コンテンツローダー

完了