Next.js

I want to auto-publish blog articles from an external service called TryRoki into my Next.js App Router site.

TryRoki has no SDK or npm package. It sends each finished article to a webhook endpoint I host: one HTTP POST with a JSON body, authenticated by a shared secret I set as a custom "Authorization: Bearer <secret>" header on the webhook.

Read https://tryroki.com/docs/nextjs and https://tryroki.com/docs/webhooks, then:
1. Add a TRYROKI_WEBHOOK_SECRET environment variable.
2. Create an App Router route handler at app/api/tryroki/route.ts that verifies the Authorization header against TRYROKI_WEBHOOK_SECRET, parses the article payload, and upserts it by its `id` field (so re-deliveries don't duplicate) into my database — or scaffold a store if I don't have one.
3. Render the articles as a blog at /blog and /blog/[slug]: use content_html for the body and inject each article's json_ld into the page.
4. Return an HTTP 2xx within 15 seconds.

Then give me the public webhook URL (https://<my-domain>/api/tryroki) so I can paste it into TryRoki → Integrations → Webhooks.

# Generate a secret
openssl rand -hex 32

TRYROKI_WEBHOOK_SECRET=paste-the-long-random-string-here

import { NextResponse } from "next/server";
import { revalidatePath } from "next/cache";
import { upsertArticle, slugify } from "@/lib/articles";

export async function POST(req: Request) {
  // 1. Authenticate — TryRoki sends your secret as a custom header.
  const auth = req.headers.get("authorization");
  if (auth !== `Bearer ${process.env.TRYROKI_WEBHOOK_SECRET}`) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
  }

  // 2. Parse the article payload.
  const article = await req.json();

  // 3. Persist. Upsert by `id` so re-deliveries and `article.updated`
  //    events update the post in place instead of duplicating it.
  await upsertArticle(article);

  // 4. Refresh the affected pages (App Router cache).
  revalidatePath("/blog");
  revalidatePath(`/blog/${slugify(article.title)}`);

  // 5. Respond 2xx within 15s. Defer any heavy work to a background queue.
  return NextResponse.json({ ok: true });
}

// The exact shape TryRoki POSTs. See /docs/webhooks for the full reference.
export type Article = {
  id: number;
  title: string;
  target_keyword: string;
  meta_description: string;
  publish_status: string;
  publish_date: string | null;
  article_type: string;
  content: string; // Markdown source
  content_html: string; // pre-rendered HTML
  json_ld: unknown[]; // structured data blocks
  image: string | null; // cover image URL
};

// Demo store — replace with your database.
const store = new Map<number, Article>();

export async function upsertArticle(article: Article) {
  store.set(article.id, article);
}

export async function listArticles() {
  return [...store.values()].sort((a, b) =>
    (b.publish_date ?? "").localeCompare(a.publish_date ?? ""),
  );
}

export async function getArticle(slug: string) {
  return [...store.values()].find((a) => slugify(a.title) === slug) ?? null;
}

export function slugify(title: string) {
  return title
    .toLowerCase()
    .replace(/[^a-z0-9]+/g, "-")
    .replace(/(^-|-$)/g, "");
}

import Link from "next/link";
import { listArticles, slugify } from "@/lib/articles";

export default async function BlogIndex() {
  const articles = await listArticles();

  return (
    <main>
      <h1>Blog</h1>
      <ul>
        {articles.map((a) => (
          <li key={a.id}>
            <Link href={`/blog/${slugify(a.title)}`}>{a.title}</Link>
            <p>{a.meta_description}</p>
          </li>
        ))}
      </ul>
    </main>
  );
}

import { notFound } from "next/navigation";
import { getArticle } from "@/lib/articles";

// In the current App Router, `params` is a promise.
export default async function ArticlePage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const article = await getArticle(slug);
  if (!article) notFound();

  return (
    <article>
      {article.image && (
        // eslint-disable-next-line @next/next/no-img-element
        <img src={article.image} alt={article.title} />
      )}
      <h1>{article.title}</h1>

      {/* content_html is pre-rendered by TryRoki */}
      <div dangerouslySetInnerHTML={{ __html: article.content_html }} />

      {/* Structured data for SEO */}
      {article.json_ld?.length > 0 && (
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(article.json_ld) }}
        />
      )}
    </article>
  );
}

curl -X POST https://yourdomain.com/api/tryroki \
  -H "Authorization: Bearer $TRYROKI_WEBHOOK_SECRET" \
  -H "Content-Type: application/json" \
  -d '{
    "event_type": "article.created",
    "id": 1,
    "title": "Hello from TryRoki",
    "target_keyword": "hello",
    "meta_description": "My first automated article.",
    "publish_status": "published",
    "publish_date": null,
    "article_type": "Guide - Howto",
    "content": "## Hello",
    "content_html": "<h2>Hello</h2><p>It works.</p>",
    "json_ld": [],
    "image": null
  }'