フレームワーク連携ガイド

各フロントエンドフレームワークでシタミの API を利用する方法を説明します。サンプルコードはサーバーサイドで API キーを扱う前提で書かれています。

1. Next.js

Next.js App Router での利用例です。サーバーコンポーネントから直接 fetch でき、ISR による自動再検証も可能です。

クライアントライブラリ

// lib/sitami.ts
const SITE_ID = process.env.SITAMI_SITE_ID!;
const API_KEY = process.env.SITAMI_API_KEY!;
const BASE_URL = process.env.SITAMI_BASE_URL ?? "https://your-domain.com";

interface Entry<T = Record<string, unknown>> {
  id: string;
  collectionId: string;
  status: string;
  data: T;
  createdAt: string;
  updatedAt: string;
}

interface EntriesResponse<T = Record<string, unknown>> {
  data: Entry<T>[];
  total: number;
  limit: number;
  offset: number;
}

export async function getEntries<T = Record<string, unknown>>(
  collectionId: string,
  options?: { limit?: number; offset?: number; keyword?: string },
): Promise<EntriesResponse<T>> {
  const params = new URLSearchParams({
    limit: String(options?.limit ?? 50),
    offset: String(options?.offset ?? 0),
    ...(options?.keyword ? { keyword: options.keyword } : {}),
  });

  const res = await fetch(
    `${BASE_URL}/api/v1/sites/${SITE_ID}/collections/${collectionId}/entries?${params}`,
    {
      headers: { Authorization: `Bearer ${API_KEY}` },
      next: { revalidate: 60 },
    },
  );

  if (!res.ok) throw new Error(`Failed to fetch entries: ${res.status}`);
  return res.json() as Promise<EntriesResponse<T>>;
}

ページコンポーネント

// app/blog/page.tsx
import { getEntries } from "@/lib/sitami";

interface BlogPost {
  title: string;
  body: string;
  publishedAt: string;
}

export default async function BlogPage() {
  const { data: posts } = await getEntries<BlogPost>("blog-posts");

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <h2>{post.data.title}</h2>
          <p>{post.data.publishedAt}</p>
        </li>
      ))}
    </ul>
  );
}

2. Astro

Astro は SSG/SSR の両方に対応しています。フロントマターで直接 fetch を呼び出し、ビルド時にコンテンツを取得できます。

---
// src/pages/blog/index.astro
const SITE_ID = import.meta.env.SITAMI_SITE_ID;
const API_KEY = import.meta.env.SITAMI_API_KEY;
const BASE_URL = import.meta.env.SITAMI_BASE_URL ?? "https://your-domain.com";

const res = await fetch(
  `${BASE_URL}/api/v1/sites/${SITE_ID}/collections/blog-posts/entries`,
  { headers: { Authorization: `Bearer ${API_KEY}` } },
);
const { data: posts } = await res.json();
---

<ul>
  {posts.map((post) => (
    <li>
      <h2>{post.data.title}</h2>
    </li>
  ))}
</ul>

3. Nuxt

Nuxt 3 での利用例です。Plugin でクライアントを提供し、composable として利用できます。

nuxt.config.ts

export default defineNuxtConfig({
  runtimeConfig: {
    sitamiApiKey: process.env.SITAMI_API_KEY,
    public: {
      sitamiSiteId: process.env.SITAMI_SITE_ID,
      sitamiBaseUrl: process.env.SITAMI_BASE_URL ?? "https://your-domain.com",
    },
  },
});

Plugin

// plugins/sitami.ts
export default defineNuxtPlugin(() => {
  const config = useRuntimeConfig();

  return {
    provide: {
      sitami: {
        async getEntries<T = Record<string, unknown>>(collectionId: string) {
          const { data } = await useFetch<{ data: T[]; total: number }>(
            `${config.public.sitamiBaseUrl}/api/v1/sites/${config.public.sitamiSiteId}/collections/${collectionId}/entries`,
            {
              headers: {
                Authorization: `Bearer ${config.sitamiApiKey}`,
              },
            },
          );
          return data.value;
        },
      },
    },
  };
});

次のステップ

• REST API の使い方
• Webhook の設定
• APIキーの管理