API Key Troubleshooting

Resolve common API key issues and get your integration working smoothly

Common API Key Issues

"API key is required" Error

This error occurs when you attempt to initialize the Next-Blog-AI client without providing an API key.

Error: API key is required

Solutions:

Make sure you provide an API key when initializing the client:

import { createNextBlogAI } from 'next-blog-ai';

// Correct initialization with API key
const nextBlogAI = createNextBlogAI({
  apiKey: process.env.NEXT_BLOG_AI_API_KEY!,
});

// For Next.js specific usage
import { createNextBlogAIForNextJs } from 'next-blog-ai';

export const nextBlogClient = createNextBlogAIForNextJs(
  process.env.NEXT_BLOG_AI_API_KEY!
);

Verify that your environment variable is properly set in the appropriate files:
```
// In .env.local for Next.js
NEXT_BLOG_AI_API_KEY=your_api_key_here
```

"Invalid API Key" Error

This error occurs when the API cannot authenticate your request with the provided key.

Error: Invalid API key provided. Please check your API key and try again.

Solutions:

Double-check your API key for accuracy - it should start with next_blog_ followed by a long alphanumeric string.
Check for whitespace or other invisible characters that might have been copied with the key - the key should be a single string with no spaces.
Confirm that your API key is still active in your dashboard.
Try regenerating the API key from your dashboard if the issue persists.

Environment Variable Issues

Problems where your API key isn't being properly loaded from environment variables.

Solutions:

For Next.js Server Components: Use a non-public environment variable:
```
NEXT_BLOG_AI_API_KEY=your_api_key
```
For Client Components (not recommended): Prefix with NEXT_PUBLIC:
```
NEXT_PUBLIC_NEXT_BLOG_AI_API_KEY=your_api_key
```
Important: After adding environment variables, restart your development server completely.
For production deployments, ensure you've added the environment variable in your hosting platform's settings (Vercel, Netlify, etc.).
If using a local .env.local file, make sure it's not being ignored by your version control system.

API Key Best Practices

Always use server-side handling

Keep your API key on the server by initializing and using the Next-Blog-AI client only in Server Components or API routes.

Use environment variables

Store your API key in environment variables, not in your source code. For local development use .env.local.

Rotate keys periodically

Regularly regenerate your API keys, especially after team member changes or potential security incidents.

Don't commit to repositories

Never commit API keys to version control. Use .gitignore to exclude .env.local and other environment files.

Never expose API keys in client-side code

Even with NEXT_PUBLIC_ prefix, API keys can be extracted from the browser. Always make API calls from Server Components or API Routes.

Correct Implementation Examples

Next.js Server Component (App Router)

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

// Create a shared instance - note that API key is server-side only
export const nextBlogAI = createNextBlogAIForNextJs(
  process.env.NEXT_BLOG_AI_API_KEY!,
  { 
    revalidate: 3600 // Optional cache setting (1 hour)
  }
);

// In a Server Component
import { nextBlogAI } from '@/lib/blog-api';

export default async function BlogPage() {
  const { data, error } = await nextBlogAI.getBlogPosts();
  
  if (error) {
    return <div>Error loading blog posts: {error.message}</div>;
  }
  
  // Pass data to client components as props
  return <BlogList posts={data.posts} />;
}

Next.js API Route

// In app/api/blog/route.ts
import { NextResponse } from 'next/server';
import { createNextBlogAI } from 'next-blog-ai';

export async function GET() {
  try {
    const nextBlogAI = createNextBlogAI({
      apiKey: process.env.NEXT_BLOG_AI_API_KEY!
    });
    
    const { data, error } = await nextBlogAI.getBlogPosts();
    
    if (error) {
      return NextResponse.json(
        { error: error.message },
        { status: error.status || 500 }
      );
    }
    
    return NextResponse.json({ data });
  } catch (err) {
    return NextResponse.json(
      { error: 'Failed to fetch blog posts' },
      { status: 500 }
    );
  }
}

Still having issues?

If you're still experiencing problems with your API keys, please contact our support team.

Contact Support Manage API Keys