Next.jsで作る — App Router と ISR

import 'server-only';
import { ShareDanCmsClient } from '@sharedan/cms-sdk';

export const cms = new ShareDanCmsClient({
  baseUrl: 'https://api.cms.sharedan.co.jp',
  apiKey: process.env.CMS_API_KEY!,
  siteCode: process.env.CMS_SITE_CODE!,
});

import Link from 'next/link';
import { cms } from '@/lib/cms';

export const revalidate = 3600; // 1時間ごとに再生成（時間ベースISR）

export default async function NewsPage() {
  const { items } = await cms.posts.list('news', { perPage: 20 });
  return (
    <ul>
      {items.map((p) => (
        <li key={p.slug}>
          <Link href={`/news/${p.slug}`}>{p.title}</Link>
          <small>{p.category.name}</small>
        </li>
      ))}
    </ul>
  );
}

import { notFound } from 'next/navigation';
import type { Metadata } from 'next';
import { renderProseMirror, ShareDanCmsApiError } from '@sharedan/cms-sdk';
import { cms } from '@/lib/cms';

// 詳細ページも時間ベースISRで追従（Webhookは投稿slugを含まないため、即時再検証は一覧のみ）
export const revalidate = 3600;

type Props = { params: { slug: string } };

export async function generateStaticParams() {
  const { items } = await cms.posts.list('news', { perPage: 100 });
  return items.map((p) => ({ slug: p.slug }));
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  try {
    const post = await cms.posts.get('news', params.slug);
    return {
      title: post.meta?.meta_title ?? post.title,
      description: post.meta?.meta_description ?? undefined,
      openGraph: post.meta?.og_image_url ? { images: [post.meta.og_image_url] } : undefined,
    };
  } catch {
    return {};
  }
}

export default async function NewsDetailPage({ params }: Props) {
  let post;
  try {
    post = await cms.posts.get('news', params.slug);
  } catch (e) {
    if (e instanceof ShareDanCmsApiError && e.isNotFound) notFound();
    throw e;
  }

  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: renderProseMirror(post.body) }} />
    </article>
  );
}

import { NextRequest, NextResponse } from 'next/server';
import { revalidatePath } from 'next/cache';
import crypto from 'node:crypto';

export async function POST(req: NextRequest) {
  const rawBody = await req.text();
  const signature = req.headers.get('x-sharedan-signature') ?? '';
  // 署名は "sha256=" + 生ボディの HMAC-SHA256（16進）。プレフィックスまで含めて比較する
  const expected =
    'sha256=' +
    crypto.createHmac('sha256', process.env.CMS_WEBHOOK_SECRET!).update(rawBody).digest('hex');

  const ok =
    signature.length === expected.length &&
    crypto.timingSafeEqual(Buffer.from(signature), Buffer.from(expected));
  if (!ok) {
    return NextResponse.json({ error: 'invalid signature' }, { status: 401 });
  }

  // ペイロードは全イベント共通のエンベロープ（{ event, resource, ... }）。個別の投稿slugは
  // 含まれないため、一覧を再検証する。詳細ページは page.tsx の revalidate（時間ベースISR）で追従する
  const { event } = JSON.parse(rawBody) as { event: string };
  if (event.startsWith('post.')) revalidatePath('/news');

  return NextResponse.json({ revalidated: true });
}