@seoblog/next

Pull AI-generated, SEO-optimized blog posts from your SEO Blog dashboard straight into your Next.js (App Router) site.

Posts are generated and published on autopilot in the dashboard, then fetched at build/request time over a simple authenticated API — no CMS to run, no markdown files to commit.

Quick start (recommended)

From the root of your Next.js project, run one command:

npx @seoblog/next add template-1

This scaffolds everything you need:

• app/<blog>/page.tsx — the blog index, in the design you chose
• app/<blog>/[slug]/page.tsx — the post page (Markdown → HTML, JSON-LD, OG tags)
• lib/seoblog.ts — a tiny helper wrapping the SDK with your API key
• app/<blog>/feed.xml/route.ts — RSS feed (optional)
• app/sitemap.ts — sitemap (optional)
• .env.local / .env.example — with the env vars stubbed out

Then:

1. Install the runtime deps the CLI prints (@seoblog/next, marked, and @tailwindcss/typography if you use Tailwind).
2. Grab your API key from the dashboard and paste it into SEOBLOG_API_KEY in .env.local.
3. Start your dev server and visit /blog.

Templates

Choose the design that fits your site — pass it to add, or run npx @seoblog/next add to pick interactively.

| Template | Name | Look | | ------------ | -------- | --------------------------------------------- | | template-1 | Minimal | Clean, centered single-column list (default) | | template-2 | Magazine | Large featured post + editorial two-column list | | template-3 | Cards | Responsive grid of cover-image cards |

npx @seoblog/next add template-2
npx @seoblog/next add magazine   # name aliases work too

Commands

| Command | What it does | | -------------------------- | ---------------------------------------------------- | | add <template> | Scaffold the blog with the chosen design | | setup | Same as add, but always prompts you to pick a design | | help | Show usage |

Manual usage

Already have a blog and just want the data? Install the package and call the SDK directly.

npm install @seoblog/next

// app/blog/page.tsx
import { getPosts } from "@seoblog/next";

export default async function BlogIndex() {
  const posts = await getPosts({ apiKey: process.env.SEOBLOG_API_KEY! });
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <a href={`/blog/${post.slug}`}>{post.title}</a>
        </li>
      ))}
    </ul>
  );
}

// app/blog/[slug]/page.tsx
import { getPost } from "@seoblog/next";

export default async function BlogPost({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const post = await getPost(slug, { apiKey: process.env.SEOBLOG_API_KEY! });
  if (!post) return null;
  // post.contentMd is Markdown — render with `marked`, `react-markdown`, etc.
  return <article>{/* ... */}</article>;
}

API

getPosts(options: { apiKey: string; revalidate?: number }): Promise<BlogPost[]>
getPost(slug: string, options: { apiKey: string; revalidate?: number }): Promise<BlogPost | null>

Responses are cached with Next.js's revalidate (default 3600s / 1 hour). Pass revalidate: 0 to disable caching, or set up an on-demand revalidation webhook for instant updates when a post is published.

BlogPost

interface BlogPost {
  id: string;
  title: string;
  slug: string;
  metaTitle: string;
  metaDescription: string;
  excerpt: string;
  tags: string[];
  contentMd: string;          // Markdown body
  coverImageUrl: string | null;
  publishedAt: string;        // ISO date
  canonicalUrl: string;
  schemaMarkup: string;       // JSON-LD
}

Environment variables

# From https://www.nextseoblog.com/dashboard — format: sblog_live_...
SEOBLOG_API_KEY=

# Your production URL — used by the generated sitemap.ts and feed.xml
NEXT_PUBLIC_SITE_URL=https://example.com

Requirements

• Next.js ≥ 14 with the App Router
• TypeScript recommended
• Tailwind CSS optional — the scaffolded pages use it, and @tailwindcss/typography gives the post body nice prose styling

Links

• Dashboard: https://www.nextseoblog.com/dashboard
• Docs: https://www.nextseoblog.com/docs