Prerequisites
Before starting, make sure you have a Blogree account (free at blogree.com), a Next.js 14+ project using App Router or Pages Router, and Node.js 18+.
Step 1: Install the Adapter
Run the following in your project root:
npm install @blogree/nextjs-adapter
Step 2: Get Your API Keys
In your Blogree dashboard, go to Sites then Add Site. Enter your website URL and click Generate Keys. Add these three values to your .env.local file:
BLOGREE_API_KEY=bk_live_xxxxxxxxxxxx
BLOGREE_API_URL=https://api.blogree.com
BLOGREE_WEBHOOK_SECRET=whs_xxxxxxxxxxxx
Step 3: Create the Webhook Handler
Create the file app/api/blogree/route.ts in your Next.js project. Import createWebhookHandler from the adapter, pass your environment variables, and use revalidatePath to invalidate your blog cache when a new post is delivered.
Step 4: Fetch and Display Posts
Use getBlogreePosts in your blog listing page to fetch all published posts. Use getBlogreePost with a slug parameter in your dynamic post pages.
Step 5: Configure Your Webhook URL
In Blogree dashboard, go to Sites then your site, and enter your webhook URL as https://yoursite.com/api/blogree. Click Verify Webhook to confirm delivery.
Step 6: Publish Your First AI Post
Go to Posts then New Post. Select a trending topic, click Generate, and hit Publish Now. Within seconds, the post appears on your Next.js site and your blog pages are revalidated.
Troubleshooting
If your webhook is not receiving, check that your deployment platform allows incoming POST requests to /api/blogree and that your environment variables match exactly. If HMAC signature validation fails, verify that your BLOGREE_WEBHOOK_SECRET matches the dashboard value character for character.
Ready to automate your blog?
Start publishing AI-generated, SEO-optimized posts to any platform — free.
Start Free — No Credit Card →