Content Generation Troubleshooting

Resolve common content generation issues and optimize your blog output

Common Content Issues

Content Not Found Error

When the API returns content not found errors for your blog requests.

Error: Blog post not found

Common Causes:

Incorrect Slug: The slug parameter doesn't match any published blog posts.
Not Published: The blog post exists but hasn't been published yet.
API Key Issues: Your API key doesn't have access to this content.

Solutions:

Verify the slug is correct and matches exactly what's in the dashboard.
Check if the post is published in your dashboard.
Ensure you're using the correct API key for your project.

Try fetching the list of all blog posts first to see available slugs:

// Get all available blog slugs
const { data, error } = await nextBlogAI.getAllBlogSlugs();
console.log(data.slugs); // Array of available slugs

Content Format Issues

When the content format doesn't match what your application expects.

Solutions:

Specify format explicitly: When requesting content, specify the format you want:

// For HTML format
const { data } = await nextBlogAI.getBlogPost(slug, {
  format: 'html'  // Returns pre-rendered HTML
});

// For JSON format
const { data } = await nextBlogAI.getBlogPost(slug, {
  format: 'json'  // Returns structured data for custom rendering
});

Set default format: Configure the default format when initializing the client:

const nextBlogAI = createNextBlogAI({
  apiKey: process.env.NEXT_BLOG_AI_API_KEY!, 
  defaultFormat: 'html'  // 'html' or 'json'
});

Rendering HTML content: When using HTML format, render with dangerouslySetInnerHTML:
```
<div dangerouslySetInnerHTML={{ __html: data.content }} />
```
Rendering JSON content: With JSON format, implement your own rendering logic.

Content Not Showing on Website

Content seems to be fetched successfully but isn't displaying on your website.

Common Causes:

Server-Side Rendering Issues: Content is fetched but not properly passed to client components.
Format Mismatch: Trying to render data in the wrong format.
CSS Conflicts: Content is rendered but hidden by CSS rules.

Solutions:

Check browser console for JavaScript errors.
Verify your rendering code matches the format you requested (HTML or JSON).
Inspect elements to check if content is present but hidden.

For HTML format with custom styles, use the styles option when initializing the client:

const nextBlogAI = createNextBlogAI({
  apiKey: process.env.NEXT_BLOG_AI_API_KEY!,
  styles: {
    blogContent: `
      /* Your custom CSS for blog posts */
      .blog-post h1 { 
        font-size: 2.5rem; 
      }
      .blog-post p { 
        margin-bottom: 1.5rem; 
      }
    `,
    blogList: `
      /* Your custom CSS for blog listings */
      .blog-list-item { 
        margin-bottom: 2rem; 
      }
    `
  }
});

Performance Optimization Tips

Implement caching

Use the built-in caching options to reduce API calls and improve performance:

// With Next.js cache settings
const { data } = await nextBlogAI.getBlogPosts({
  next: { 
    revalidate: 3600 // Cache for 1 hour
  }
});

// With client's built-in cache
const { data } = await nextBlogAI.getBlogPosts({
  cache: { 
    ttl: 3600 // Cache for 1 hour
  }
});

Use ISR for blog pages

Implement Incremental Static Regeneration for blog pages to balance performance and freshness:

// In page.tsx
export const revalidate = 3600; // Revalidate every hour

export default async function BlogPage() {
  const { data } = await nextBlogAI.getBlogPosts();
  return <BlogList posts={data.posts} />;
}

Generate metadata for SEO

Utilize the SEO-specific endpoints to get optimized metadata for your blog pages:

// In app/blog/[slug]/page.tsx
import { Metadata } from 'next';
import { nextBlogAI } from '@/lib/blog-api';

export async function generateMetadata({
  params
}: {
  params: Promise<{ slug: string }>
}): Promise<Metadata> {
  const { slug } = await params;
  const { data } = await nextBlogAI.getBlogPostSEO(slug);
  
  return {
    title: data.title,
    description: data.description,
    keywords: data.keywords,
    openGraph: {
      title: data.title,
      description: data.description,
      images: [{ 
        url: data.featuredImage 
      }]
    }
  };
}

Advanced Configuration Options

For more control over your content and performance, consider these advanced configuration options:

Retry Configuration

Configure automatic retry behavior for resilience against temporary failures:

const nextBlogAI = createNextBlogAI({
  apiKey: process.env.NEXT_BLOG_AI_API_KEY!,
  retry: {
    maxRetries: 3,        // Maximum number of retry attempts
    initialDelay: 300,    // Initial delay before first retry (ms)
    backoffFactor: 2,     // Factor by which to increase delay after each retry
    maxDelay: 10000,      // Maximum delay between retries (ms)
    jitter: true,         // Whether to add randomness to retry delays
  }
});

Blog Listing Display Format

Control how blog lists are displayed:

// Set default display format when initializing client
const nextBlogAI = createNextBlogAI({
  apiKey: process.env.NEXT_BLOG_AI_API_KEY!,
  defaultBlogListDisplay: 'grid', // 'grid' or 'list'
});

// Override for specific requests
const { data } = await nextBlogAI.getBlogPosts({
  display: 'list',  // Override default display format
});

Handling Dynamic Routes

Generate all available blog post slugs for dynamic routes:

// In app/blog/[slug]/page.tsx
import { nextBlogAI } from '@/lib/blog-api';

// Generate dynamic routes at build time
export async function generateStaticParams() {
  const { data } = await nextBlogAI.getAllBlogSlugs();
  
  return data.slugs.map((slug) => ({
    slug,
  }));
}

Still having issues?

If you're still experiencing problems with content generation, please contact our support team.

Contact Support View Documentation