Help Center | Next-Blog-AI

This guide will walk you through the process of integrating Next-Blog-AI with your Next.js application. To set up your project in the Next-Blog-AI dashboard, visit the Project Setup guide first.

Install the Package

Start by installing the Next-Blog-AI package in your Next.js project.

Installation

In your Next.js project directory, install the Next-Blog-AI package:

# Using npm

npm install next-blog-ai

# Using yarn

yarn add next-blog-ai

# Using pnpm

pnpm add next-blog-ai

Create a new file at lib/next-blog-ai.ts to initialize the client:

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

// Initialize the client for Next.js with your API key
export const { getBlogPosts, getBlogPost, getBlogPostSEO, getBlogListSEO, getAllBlogSlugs } = createNextBlogAIForNextJs(
  process.env.NEXT_BLOG_AI_API_KEY!
);
// Use getBlogPosts, getBlogPost, etc. in your Next.js app router components

Add your API key to your environment variables (.env.local):

# .env.local
NEXT_BLOG_AI_API_KEY=your_api_key_here

Create Blog Pages

Now let's create pages to display your blog posts.

Create Blog List Page

Create a new file at app/blog/page.tsx with this content:

// 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 Blog Post Detail Page

Create a new file at app/blog/[slug]/page.tsx:

// 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>
  );
}

SEO & Sitemap

Finally, let's optimize your blog for search engines with a dynamic sitemap.

Create a Dynamic Sitemap

Create a new file 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: '/',
      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];
}

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

Enable Comments

Blog posts include a comment form. To make it work, add a simple API route.

Create Comment Handler

Create a new file at app/api/blog/comment/route.ts:

// app/api/blog/comment/route.ts
import { createCommentHandler } from 'next-blog-ai';

export const POST = createCommentHandler({
  apiKey: process.env.NEXT_BLOG_AI_API_KEY!,
});

That's it! The handler automatically:

Parses comment form submissions
Validates required fields
Submits comments to Next-Blog-AI
Returns appropriate responses

Comments require moderation. View and approve them in your project dashboard.

Success!

Your blog is now set up with Next-Blog-AI. Content will be automatically generated and published according to your schedule. Visit your project dashboard to monitor performance, moderate comments, and manage your content.

Previous: Quickstart Next: API Reference

Quickstart

Recommended: Use the Setup Wizard

Or set up manually: