Manual Setup

npm install next-blog-ai

Add your API key to .env.local:

NEXT_BLOG_AI_API_KEY=your-api-key-here

// lib/next-blog-ai.ts
import { createNextBlogAIForNextJs } from 'next-blog-ai';

export const { getBlogPosts, getBlogPost, getAllBlogSlugs, getBlogPostSEO, getBlogListSEO, setStyles } = createNextBlogAIForNextJs(
  process.env.NEXT_BLOG_AI_API_KEY!
);

See the Examples & Recipes docs for full usage details.

Create a new file at app/blog/page.tsx. This page will display your list of blog posts using data fetched from Next-Blog-AI.

# app/blog/page.tsx
import { Metadata } from 'next';
import Link from 'next/link';
import { nextBlogAI } from '@/lib/next-blog-ai';

export async function generateMetadata() {
  try {
    // Fetch only SEO data with optimized endpoint
    const { data, error } = await nextBlogAI.getBlogListSEO();

    // Return the dynamic SEO metadata
    return {
      title: data.seo.title,
      description: data.seo.description,
      keywords: data.seo.keywords.join(', '),
    };
  } catch (error) {
    console.error('Error generating blog list metadata:', error);
    // Return the static fallback if there's an error
    return metadata;
  }
}

export default async function BlogPage() {
  // Fetch blog posts from Next-Blog-AI
  const { data, error } = await nextBlogAI.getBlogPosts();
  
  if (error) {
    console.error('Error fetching blog posts:', error);
    return <div>Failed to load blog posts. Please try again later.</div>;
  }
  
  return (
    <main className="container mx-auto px-4 py-12">
      <h1 className="text-3xl font-bold mb-8">Blog Posts</h1>
      {/* Render the HTML content directly */}
      <div dangerouslySetInnerHTML={{ __html: data.content }} />
    </main>
  );
}

Create a new file at app/blog/[slug]/page.tsx. This page will render individual blog posts based on the URL slug.

# app/blog/[slug]/page.tsx
import { Metadata } from 'next';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import { nextBlogAI } from '@/lib/next-blog-ai';

// Generate metadata for SEO
export async function generateMetadata({ params }) {
  // Important: await the params in App Router
  const { slug } = await params;

  const { data } = await nextBlogAI.getBlogPost(slug);

  return {
    title: data.seo.title,
    description: data.seo.description,
    keywords: data.seo.keywords.join(', '),
    openGraph: {
      title: data.seo.title,
      description: data.seo.description,
    },
  };
}

export default async function BlogPostPage({ params }) {
  const { slug } = await params;

  // Fetch the blog post
  const { data, error } = await nextBlogAI.getBlogPost(slug);

  return (
    <main className="container mx-auto px-4 py-12 max-w-4xl">
      <Link
        href="/blog"
        className="text-sm text-muted-foreground hover:text-primary mb-6 inline-flex items-center"
      >
        ← Back to all posts
      </Link>
      {/* Render the HTML content directly */}
      <div dangerouslySetInnerHTML={{ __html: data.content }} />
    </main>
  );
}

To help search engines discover your content, add a dynamic sitemap at app/sitemap.ts.

# app/sitemap.ts
import { MetadataRoute } from 'next';
import { nextBlogAI } from '@/lib/next-blog-ai';

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const { data, error } = await nextBlogAI.getAllBlogSlugs();

  // Create sitemap entries for blog posts
  const blogPosts = data.slugs.map((slug) => ({
    url: "{YOUR_DOMAIN}/blog/{slug}",
    lastModified: new Date(),
    changeFrequency: 'daily' as const,
    priority: 0.9,
  }));

  // Add other important pages
  const pages = [
    {
      url: "{YOUR_DOMAIN}/",
      lastModified: new Date(),
      changeFrequency: 'daily' as const,
      priority: 1,
    },
    {
      url: "{YOUR_DOMAIN}/blog",
      lastModified: new Date(),
      changeFrequency: 'daily' as const,
      priority: 0.8,
    },
    // Add other important pages here
  ];

  return [...pages, ...blogPosts];
}

Replace {YOUR_DOMAIN} with your actual domain, e.g., https://mywebsite.com.

For more advanced SEO techniques, see our comprehensive SEO guide.

Your Next.js blog powered by Next-Blog-AI is now set up. Visit /blog to see your generated posts. For further customization, check out the rest of the documentation.