Step 1
Connect Webhook in BlogPump
In BlogPump Dashboard, open Integrations -> Webhook and enter your Next.js endpoint URL.
Step 2
Verify signatures
Validate `x-blogpump-signature` with HMAC-SHA256 and reject invalid requests.
Step 3
Store incoming articles
Persist article payload to your own database, JSON store, or MDX files.
Step 4
Render blog routes
Create `/blog` and `/blog/[slug]` pages in App Router and map stored content to UI.
1) Webhook route example (secure)
// app/api/blogpump/webhook/route.ts
import { NextRequest, NextResponse } from 'next/server'
import crypto from 'crypto'
const SECRET = process.env.BLOGPUMP_WEBHOOK_SECRET!
function verifySignature(body: string, signature: string) {
const expected = crypto.createHmac('sha256', SECRET).update(body).digest('hex')
return signature && crypto.timingSafeEqual(Buffer.from(signature), Buffer.from(expected))
}
export async function POST(request: NextRequest) {
const rawBody = await request.text()
const signature = request.headers.get('x-blogpump-signature') ?? ''
if (!verifySignature(rawBody, signature)) {
return NextResponse.json({ error: 'Invalid signature' }, { status: 401 })
}
const article = JSON.parse(rawBody)
// Save article to DB / CMS / JSON store here
return NextResponse.json({ ok: true })
}2) Render with App Router
// app/blog/[slug]/page.tsx (simplified)
import { notFound } from 'next/navigation'
export default async function BlogPostPage({ params }: { params: { slug: string } }) {
const post = await getPostBySlug(params.slug) // your data layer
if (!post) notFound()
return (
<article>
<h1>{post.title}</h1>
<div dangerouslySetInnerHTML={{ __html: post.content }} />
</article>
)
}Important: sanitize or trust only HTML generated by your own pipeline before using `dangerouslySetInnerHTML`. Also store publish timestamps and SEO fields (`meta_title`, `meta_description`) to preserve ranking quality.