Next.js の Draft Mode を利用して microCMS のプレビュー表示を実装する

http://localhost:3000/api/preview?type=blog&secret=miyazaki-profile-secret&id={CONTENT_ID}&draftKey={DRAFT_KEY}

/**
 * Preview API (GET) — microCMS プレビュー開始エンドポイント
 */
 
import { NextRequest } from "next/server";
import type { ContentType } from "@/config/preview-cookies";
 
export const revalidate = 60;
 
export async function GET(req: NextRequest) {
  // 静的ビルド（S3/CloudFront用）では固定レスポンスを返す（=静的化対応）
  if (process.env.STATIC_EXPORT === "true") {
    return new Response("Draft preview is disabled on static builds.", {
      status: 404,
      headers: { "Content-Type": "text/plain" },
    });
  }
 
  // 動的 import
  const { draftMode, cookies } = await import("next/headers");
  const { redirect } = await import("next/navigation");
  const { getBlogById, getPortfolioById } = await import("@/libs/microcms");
  const { cookieNames, isContentType } = await import(
    "@/config/preview-cookies"
  );
 
  // type（blog/portfolio）に応じたリゾルバ
  const resolver = {
    blog: {
      getById: getBlogById,
      toPath: (slug: string) => `/blog/${slug}`,
    },
    portfolio: {
      getById: getPortfolioById,
      toPath: (slug: string) => `/portfolio/${slug}`,
    },
  } as const;
 
  // クエリからパラメータを取り出しつつ、余計な空白を除去
  const { searchParams } = new URL(req.url);
  const secret = (searchParams.get("secret") ?? "").trim();
  const rawType = (searchParams.get("type") ?? "").trim();
  const contentId = (searchParams.get("id") ?? "").trim();
  const draftKey = (searchParams.get("draftKey") ?? "").trim();
 
  // バリデーション
  if (secret !== process.env.MICROCMS_PREVIEW_SECRET)
    return new Response("Invalid token", { status: 401 });
  if (!contentId || !isContentType(rawType))
    return new Response("Invalid params", { status: 400 });
  const type: ContentType = rawType;
 
  // 下書き記事を取得して slug を解決
  const article = await resolver[type].getById(contentId, draftKey);
  const slug = article?.articleSlug;
  if (!slug) return new Response("Slug not found", { status: 404 });
 
  // Draft Mode を ON
  const d = await draftMode();
  d.enable();
 
  // Cookie セット
  const cookieStore = await cookies();
  const names = cookieNames(type);
  const path = resolver[type].toPath(slug);
 
  // draftKey
  if (draftKey) {
    cookieStore.set({
      name: names.draftKey,
      value: draftKey,
      httpOnly: true,
      secure: false,
      sameSite: "lax",
      maxAge: 60 * 30,
      path: path,
    });
  }
 
  // contentId
  cookieStore.set({
    name: names.contentId,
    value: contentId,
    httpOnly: true,
    secure: false,
    sameSite: "lax",
    maxAge: 60 * 30,
    path: path,
  });
 
  // 対象ページにリダイレクト（/blog/[slug] or /portfolio/[slug]）
  redirect(path);
}

...
 
// contentId, draftKey を使用し、下書き記事を取得（プレビュー用）
export async function getPortfolioById(
  contentId: string,
  draftKey: string
): Promise<PortfolioDetailProps | null> {
  const data = await client.getListDetail<PortfolioDetailProps>({
    endpoint: "portfolio",
    contentId,
    queries: {
      draftKey: draftKey || undefined,
    },
    customRequestInit: {
      cache: "no-store" as const,
    },
  });
 
  return data ?? null;
}
 
...

...
 
export const revalidate = 60;
 
// 静的ビルド（export）の判定フラグ
const isStaticBuild = Boolean(process.env.STATIC_EXPORT === "true");
 
type PageProps = {
  params: Promise<{ slug: string }>;
};
 
...
 
/**
 * ページ本体
 * - 開発時：Draft Mode を考慮して“下書き本文”を優先して取得
 * - 静的ビルド時：公開データのみを取得
 */
export default async function BlogContentPage({ params }: PageProps) {
  const { slug } = await params;
 
  // 表示データ本体 & プレビューバナー表示可否
  let blogContentData:
    | Awaited<ReturnType<typeof getBlogBySlug>>
    | Awaited<ReturnType<typeof getBlogById>>
    | null = null;
  let showBanner = false;
 
  if (!isStaticBuild) {
    // 動的 import
    const { draftMode, cookies } = await import("next/headers");
 
    // Draft Mode を ON
    const d = await draftMode();
    const isEnabled = d.isEnabled;
 
    // Cookie名の取得
    const names = cookieNames("blog");
    const cookieStore = await cookies();
 
    // プレビューで付与した Cookie を読む（存在しなければ undefined）
    const draftKey = isEnabled
      ? cookieStore.get(names.draftKey)?.value
      : undefined;
    const contentId = isEnabled
      ? cookieStore.get(names.contentId)?.value
      : undefined;
 
    // Draftモードで draftKey と contentId が揃っていれば下書きを取得
    if (isEnabled && draftKey && contentId) {
      const draft = await getBlogById(contentId, draftKey);
      // 別記事の Cookie が残っている可能性を考慮し、slug 一致時のみ採用
      if (draft?.articleSlug === slug) {
        blogContentData = draft;
        showBanner = true;
      }
    } else {
      // プレビュー無効/不足時は公開本文にフォールバック
      blogContentData = await getBlogBySlug(slug);
    }
  } else {
    // 静的ビルド：cookies/draftMode には触れず、公開本文を取得
    blogContentData = await getBlogBySlug(slug);
  }
 
  // データが無ければ 404
  if (!blogContentData) return notFound();
 
  ...
 
  return (
    <>
      {/* プレビュー時のみ上部にバナーを表示 */}
      {showBanner && <PreviewBanner type="blog" />}
 
      <BlogClientWrapper blogContent={blogContentData}>
        ...
      </BlogClientWrapper>
    </>
  );
}

...
 
export default function PreviewBanner({ type }: PreviewBannerProps) {
  const disableHref = `/api/draft-disable?type=${type}`;
 
  return (
    <div className={style.container}>
      プレビュー表示中
      <Link href={disableHref} className={style.link}>
        解除して一覧へ
      </Link>
    </div>
  );
}

/**
 * Draft Disable API (GET) — プレビュー終了エンドポイント
 */
 
import { NextRequest } from "next/server";
import type { ContentType } from "@/config/preview-cookies";
 
export const revalidate = 60;
 
export async function GET(req: NextRequest) {
  // 静的ビルド（S3/CloudFront用）では固定レスポンスを返す（=静的化対応）
  if (process.env.STATIC_EXPORT === "true") {
    return new Response("Draft preview is disabled on static builds.", {
      status: 404,
      headers: { "Content-Type": "text/plain" },
    });
  }
 
  // 動的 import
  const { draftMode, cookies } = await import("next/headers");
  const { redirect } = await import("next/navigation");
  const { cookieNames, isContentType } = await import(
    "@/config/preview-cookies"
  );
 
  // 一覧ページへの戻り先（リダイレクト先）を type ごとに定義
  const listPath: Record<ContentType, string> = {
    blog: "/blog",
    portfolio: "/portfolio",
  };
 
  // クエリから type を取得
  const { searchParams } = new URL(req.url);
  const rawType = (searchParams.get("type") ?? "").trim();
 
  // Draft Mode を OFF
  const d = await draftMode();
  d.disable();
 
  // Cookie の削除
  const cookieStore = await cookies();
 
  if (isContentType(rawType)) {
    // 指定タイプだけ削除（/blog or /portfolio の一覧に戻す）
    const names = cookieNames(rawType);
    cookieStore.delete(names.draftKey);
    cookieStore.delete(names.contentId);
    redirect(listPath[rawType]);
  } else {
    // type が不正なら全タイプ分まとめて削除し、トップへ戻す
    (Object.keys(listPath) as (keyof typeof listPath)[]).forEach((t) => {
      const names = cookieNames(t);
      cookieStore.delete(names.draftKey);
      cookieStore.delete(names.contentId);
    });
    redirect("/");
  }
}