Show your Ryterr posts on a Next.js blog.

pnpm add @ryterr/client
# or npm install @ryterr/client
# or yarn add @ryterr/client

RYTERR_API_KEY=rytk_live_...
RYTERR_API_BASE=https://ryterr.com

// app/blog/page.tsx
const RYTERR_API_BASE = process.env.RYTERR_API_BASE ?? "https://ryterr.com"

// ISR: refresh every 60 seconds. The webhook below makes this
// instant when it fires successfully.
export const revalidate = 60

export default async function BlogIndex() {
  const res = await fetch(`${RYTERR_API_BASE}/api/v1/content/posts?limit=20`, {
    headers: {
      Authorization: `Bearer ${process.env.RYTERR_API_KEY!}`,
    },
    next: { revalidate: 60 },
  })
  if (!res.ok) throw new Error("Failed to load Ryterr posts")

  const { data: posts } = await res.json()

  return (
    <main>
      <h1>Blog</h1>
      <ul>
        {posts.map((p) => (
          <li key={p.id}>
            <a href={`/blog/${p.slug}`}>{p.title}</a>
            <p>{p.excerpt}</p>
          </li>
        ))}
      </ul>
    </main>
  )
}

// app/blog/[slug]/page.tsx
import { notFound } from "next/navigation"

const RYTERR_API_BASE = process.env.RYTERR_API_BASE ?? "https://ryterr.com"

export const revalidate = 60
export const dynamicParams = true

export default async function BlogPost({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  const res = await fetch(
    `${RYTERR_API_BASE}/api/v1/content/posts/${encodeURIComponent(slug)}`,
    {
      headers: {
        Authorization: `Bearer ${process.env.RYTERR_API_KEY!}`,
      },
      next: { revalidate: 60 },
    }
  )
  if (res.status === 404) notFound()
  if (!res.ok) throw new Error("Failed to load Ryterr post")

  const { data: post } = await res.json()
  if (!post) notFound()

  return (
    <article>
      <h1>{post.title}</h1>
      {post.featuredImageUrl ? (
        <img
          src={post.featuredImageUrl}
          alt={post.featuredImageAlt ?? post.title}
        />
      ) : null}
      {/* post.html is sanitized server-side by Ryterr (scripts, on*
          handlers, and javascript: URLs are stripped), so it is safe
          to render directly. Add your own sanitizer for defense in
          depth if you like. */}
      <div dangerouslySetInnerHTML={{ __html: post.html }} />
    </article>
  )
}

// app/api/ryterr-webhook/route.ts
import { verifyWebhook, InvalidSignatureError } from "@ryterr/client"
import { revalidatePath } from "next/cache"

export async function POST(req: Request) {
  try {
    const event = await verifyWebhook(req, process.env.RYTERR_API_KEY!)

    if (event.type === "post.published") {
      revalidatePath("/blog")
      revalidatePath(`/blog/${event.data.post.slug}`)
    }
    if (event.type === "post.updated") {
      revalidatePath("/blog")
      revalidatePath(`/blog/${event.data.post.slug}`)
      if (event.data.previousSlug) {
        revalidatePath(`/blog/${event.data.previousSlug}`)
      }
    }
    if (event.type === "post.deleted") {
      revalidatePath("/blog")
      revalidatePath(`/blog/${event.data.slug}`)
    }

    return Response.json({ ok: true })
  } catch (err) {
    if (err instanceof InvalidSignatureError) {
      return new Response("bad signature", { status: 401 })
    }
    throw err
  }
}