autoblogwriterTechnical Documentation
Cmd+K
Docs
Getting Started
Quickstart
Documentation

Quickstart

Build a complete blog in your Next.js app in 5 minutes.

Quickstart

This guide walks you through adding a fully functional blog to your Next.js App Router project using the AutoBlogWriter SDK — from installation to a live blog with SEO, revalidation, and styled components.

1. Install the SDK

npm install @autoblogwriter/sdk

2. Set Environment Variables

Create or update .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

3. Import the Styles

In your root layout (app/layout.tsx), import the default AutoBlogWriter styles:

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

4. Create the 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>
  );
}

5. Create the 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>
  );
}

The generatePostMetadata function automatically generates <title>, <meta description>, OpenGraph, and Twitter Card metadata from your post's SEO fields.

6. Add the Revalidation Webhook

This API route receives webhooks from AutoBlogWriter when content changes, automatically clearing your Next.js cache:

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

Then in your AutoBlogWriter dashboard, go to Settings > Webhooks and add:

  • URL: https://yoursite.com/api/autoblogwriter/revalidate
  • Secret: The same value as your AUTOBLOGWRITER_REVALIDATE_SECRET env var.

7. Add Sitemap and Robots

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

8. Run Your App

npm run dev

Visit http://localhost:3000/blog to see your published posts.

What You Get

With these ~50 lines of code, your blog now has:

  • Server-rendered blog listing and post pages
  • Automatic SEO metadata (title, description, OpenGraph, Twitter Cards)
  • Automatic cache revalidation via webhooks
  • Sitemap and robots.txt generation
  • Styled components with a dark theme
  • Cursor-based pagination support
  • Reading time display

Next Steps

PreviousInstallation
NextWorkspaces