Next.js Blog integration

Connect Auto SEO to Next.js Blog

About 12 minutes. The cleanest pattern is a tiny webhook route that writes MDX into your repo or content folder. Two snippets and you're done.

1. 1

   Add an Auto SEO webhook endpoint

   Create app/api/auto-seo-webhook/route.ts in your Next.js project. The route accepts POST payloads from Auto SEO and writes MDX.

2. 2

   Generate a shared secret

   Set AUTOSEO_WEBHOOK_SECRET in your env. Auto SEO sends it in the x-autoseo-signature header so you can authenticate the request.

3. 3

   Configure the integration in Auto SEO

   Integrations → Custom Webhook. Paste the endpoint URL (e.g. https://yoursite.com/api/auto-seo-webhook) and the shared secret.

4. 4

   Choose payload format

   Pick MDX (default) or HTML. MDX is recommended for Next.js because you can render with your component library.

5. 5

   Decide commit-vs-write strategy

   For statically built sites, configure the webhook to open a PR via the GitHub App. For ISR/SSR sites, writing to a content folder + revalidatePath works.

// /app/api/auto-seo-webhook/route.ts
import { NextResponse } from "next/server";
import { writeFile } from "node:fs/promises";

export async function POST(req: Request) {
  const sig = req.headers.get("x-autoseo-signature");
  if (sig !== process.env.AUTOSEO_WEBHOOK_SECRET) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
  }
  const { slug, frontmatter, mdx } = await req.json();
  const body = `---\n${Object.entries(frontmatter)
    .map(([k, v]) => `${k}: "${String(v).replace(/"/g, '\\"')}"`).join("\n")}\n---\n\n${mdx}`;
  await writeFile(`content/posts/${slug}.mdx`, body);
  return NextResponse.json({ ok: true });
}

Slug: nextjs-blog