NuxtでヘッドレスCMSを使う：useFetch・SSR・下書きプレビュー

npm install @genko-me/sdk

// nuxt.config.tsexport default defineNuxtConfig({  runtimeConfig: { genkoApiKey: "" },});

// server/utils/genko.tsimport { createGenko, listApi } from "@genko-me/sdk";type Blog = { title: string; body: string };const apis = {  blog: listApi<Blog>({    fields: [      { id: "title", type: "text" },      { id: "body", type: "richtext" },    ],  }),};export function createBlogClient(apiKey: string) {  if (!apiKey) throw new Error("NUXT_GENKO_API_KEY is required");  return createGenko({ workspace: "your-workspace", apiKey, apis }).apis.blog;}

// server/api/blog/index.get.tsimport { createBlogClient } from "../../utils/genko";export default defineEventHandler(async event => {  const config = useRuntimeConfig(event);  return createBlogClient(config.genkoApiKey).getAll({    orders: "-publishedAt",    fields: ["id", "title"],  });});

<script setup lang="ts">const { data: posts, error } = await useFetch("/api/blog");if (error.value) {  throw createError({ statusCode: 502, statusMessage: "Unable to load posts" });}useHead({ title: "Blog" });</script><template>  <main>    <h1>Blog</h1>    <ul>      <li v-for="post in posts" :key="post.id">        <NuxtLink :to="`/blog/${post.id}`">{{ post.title }}</NuxtLink>      </li>    </ul>    <p v-if="posts?.length === 0">No published posts.</p>  </main></template>

// server/api/blog/[id].get.tsimport { createBlogClient } from "../../utils/genko";export default defineEventHandler(async event => {  const id = getRouterParam(event, "id");  if (!id) throw createError({ statusCode: 400, statusMessage: "Missing id" });  const query = getQuery(event);  const draftKey = typeof query.draftKey === "string" ? query.draftKey : undefined;  const config = useRuntimeConfig(event);  const post = await createBlogClient(config.genkoApiKey).getOrNull(id, { draftKey });  if (!post) throw createError({ statusCode: 404, statusMessage: "Post not found" });  if (draftKey) setResponseHeader(event, "Cache-Control", "private, no-store");  return { post, preview: Boolean(draftKey) };});

<script setup lang="ts">const route = useRoute();const { data, error } = await useFetch(  () => `/api/blog/${encodeURIComponent(String(route.params.id))}`,  { query: computed(() => ({ draftKey: route.query.draftKey })) },);if (error.value || !data.value) {  throw createError({    statusCode: error.value?.statusCode === 404 ? 404 : 502,    statusMessage: "Unable to load post",  });}if (import.meta.server && data.value.preview) {  useResponseHeader("Cache-Control").value = "private, no-store";}useHead(() => ({  title: data.value?.preview ? "Draft preview" : data.value?.post.title,  meta: data.value?.preview ? [    { name: "robots", content: "noindex, nofollow" },    { name: "referrer", content: "no-referrer" },  ] : [],}));</script><template>  <main v-if="data">    <p v-if="data.preview">Draft preview</p>    <h1>{{ data.post.title }}</h1>    <div v-html="data.post.body" />  </main></template>