Configuration

Set up your API keys and environment variables

Environment Variables

Create a .env.local file in your project root and add the following environment variables:

# .env.local

BLOGFLOW_API_KEY=your_api_key_here

NEXT_PUBLIC_BLOGFLOW_API_KEY=your_api_key_here

💡Usage guide:

BLOGFLOW_API_KEY - For server-side usage (API routes, Server Components)

NEXT_PUBLIC_BLOGFLOW_API_KEY - For client-side usage (Client Components)

Usage Examples

Server-side Usage

Use in API routes or Server Components:

// app/api/posts/route.ts
import { BlogFlow } from '@blogflow/sdk/core';
import { NextResponse } from 'next/server';

const client = new BlogFlow({
  apiKey: process.env.BLOGFLOW_API_KEY, // 服务端使用
  defaultLanguage: 'en',
});

export async function GET() {
  const posts = await client.getPosts({ limit: 10 });
  return NextResponse.json(posts);
}

Client-side Usage

Use in Client Components:

'use client'

import { useEffect, useState } from 'react';
import { BlogFlow } from '@blogflow/sdk/core';

export default function BlogPosts() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const client = new BlogFlow({
      apiKey: process.env.NEXT_PUBLIC_BLOGFLOW_API_KEY, // 客户端使用
      defaultLanguage: 'en',
    });

    client.getPosts({ limit: 5 }).then(setPosts);
  }, []);

  return (
    <div>
      {posts.map(post => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  );
}

UI Component Usage

Using BlogFlowUI component (recommended):

import { BlogFlowUI } from '@blogflow/sdk/react';

export default function BlogPage() {
  return (
    <BlogFlowUI
      apiKey={process.env.NEXT_PUBLIC_BLOGFLOW_API_KEY}
      defaultLanguage="en"
      defaultTheme="default"
    />
  );
}

⚠️Security Notes

• .env.local files are not committed to version control. Keep your API keys secure.

• Never expose sensitive API keys in client-side code.

• Consider using environment variables or key management services in production.