Next.js Integration

This page covers the complete Next.js integration pattern — from project setup to production deployment.

Overview

The AutoBlogWriter SDK is designed for the Next.js App Router. It leverages:

Server Components — All data fetching happens server-side (API keys never reach the browser).
Cache Tags — Granular cache invalidation via next/cache.
Metadata API — Automatic SEO metadata generation.
Route Handlers — Webhook endpoints.

Project Structure

A typical AutoBlogWriter + Next.js project:

app/
├── layout.tsx                        # Import styles here
├── blog/
│   ├── page.tsx                      # Blog listing
│   └── [slug]/
│       └── page.tsx                  # Individual post
├── api/
│   └── autoblogwriter
│       └── revalidate/
│           └── route.ts             # Webhook handler
├── sitemap.ts                        # Dynamic sitemap
├── robots.ts                         # Robots.txt
└── not-found.tsx                     # 404 page

Full Implementation

Root Layout

// app/layout.tsx
import "@autoblogwriter/sdk/styles.css";
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Blog Listing Page

// app/blog/page.tsx
import Link from "next/link";
import { fetchBlogPosts } from "@autoblogwriter/sdk/next";
import { BlogPostList } from "@autoblogwriter/sdk/react";
 
export default async function BlogPage() {
  const { posts } = await fetchBlogPosts();
  return (
    <main style={{ maxWidth: 720, margin: "0 auto", padding: "2rem" }}>
      <BlogPostList posts={posts} linkComponent={Link} />
    </main>
  );
}

Blog Post Page

// app/blog/[slug]/page.tsx
import { fetchBlogPost, generatePostMetadata } from "@autoblogwriter/sdk/next";
import { BlogPost } from "@autoblogwriter/sdk/react";
import type { Metadata } from "next";
 
type Props = { params: Promise<{ slug: string }> };
 
export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;
  return generatePostMetadata(slug);
}
 
export default async function PostPage({ params }: Props) {
  const { slug } = await params;
  const post = await fetchBlogPost(slug);
  return (
    <main style={{ maxWidth: 720, margin: "0 auto", padding: "2rem" }}>
      <BlogPost post={post} />
    </main>
  );
}

Revalidation Webhook

// app/api/autoblogwriter/revalidate/route.ts
import { createEnvRevalidateHandler } from "@autoblogwriter/sdk/next";
 
export const runtime = "nodejs";
export const POST = createEnvRevalidateHandler();

Sitemap

// app/sitemap.ts
import { generateBlogSitemap } from "@autoblogwriter/sdk/next";
 
export const revalidate = 300;
 
export default function sitemap() {
  return generateBlogSitemap();
}

Robots

// app/robots.ts
import { generateBlogRobots } from "@autoblogwriter/sdk/next";
 
export default function robots() {
  return generateBlogRobots();
}

Environment Variables

# .env.local
AUTOBLOGWRITER_API_KEY=ba_pk_your_api_key
AUTOBLOGWRITER_WORKSPACE_SLUG=your-workspace
SITE_URL=https://yoursite.com
AUTOBLOGWRITER_REVALIDATE_SECRET=your_webhook_secret

Static Generation (SSG)

To pre-render all blog posts at build time, add generateStaticParams:

// app/blog/[slug]/page.tsx
import { fetchBlogPosts, fetchBlogPost, generatePostMetadata } from "@autoblogwriter/sdk/next";
import { BlogPost } from "@autoblogwriter/sdk/react";
 
export async function generateStaticParams() {
  const { posts } = await fetchBlogPosts({ limit: 100 });
  return posts.map((post) => ({ slug: post.slug }));
}
 
export async function generateMetadata({ params }: Props) {
  const { slug } = await params;
  return generatePostMetadata(slug);
}
 
export default async function PostPage({ params }: Props) {
  const { slug } = await params;
  const post = await fetchBlogPost(slug);
  return <BlogPost post={post} />;
}

Combined with the revalidation webhook, this gives you the best of both worlds: fast static pages that update automatically.

Caching Strategy

The SDK sets Next.js cache tags on every request:

Request	Cache Tag
`fetchBlogPosts()`	`autoblogwriter:{slug}:posts`
`fetchBlogPost("hello")`	`autoblogwriter:{slug}:post:hello`
Sitemap generation	`autoblogwriter:{slug}:sitemap`

When a webhook arrives, the revalidation handler invalidates the relevant tags, and Next.js regenerates only the affected pages.

Custom Fetch Options

Override caching behavior per-request using the lower-level client:

import { createAutoBlogWriterFromEnv } from "@autoblogwriter/sdk";
 
const { client, tags } = createAutoBlogWriterFromEnv();
 
// Disable cache for this request
const { posts } = await client.getPosts({ cache: "no-store" });
 
// Set a revalidation interval
const post = await client.getPostBySlug("hello", {
  next: { revalidate: 60 }, // Revalidate every 60 seconds
});
 
// Add custom tags
const { posts: tagged } = await client.getPosts({
  next: { tags: [tags.posts, "custom-tag"] },
});

Deployment

Vercel

No special configuration needed. Environment variables are set in the Vercel dashboard.

Self-Hosted

Ensure your server supports:

Node.js 18+
The crypto module (for webhook verification)
Environment variables are accessible at runtime

Static Export

If you're using output: "export" in next.config.js, API route handlers (like the revalidation webhook) are not available. Use your hosting provider's auto-deploy webhook instead, and clear the Next.js cache on each build:

rm -rf .next/cache && npm run build

See Webhooks & Revalidation — Static Export for full details and provider-specific setup.

Next Steps

React Components — Customize component rendering.
Webhooks & Revalidation — Deep dive into cache invalidation.
Styling — Theme the components.