create-next-blog-ai

CLI tool to easily set up Next-Blog-AI in your Next.js project. This tool scaffolds blog pages with Next-Blog-AI integration.

Usage

npx create-next-blog-ai

This will:

1. Check if you're in a valid Next.js project
2. Detect if your project uses TypeScript or JavaScript
3. Create blog list and blog post pages in your Next.js project
4. Add the next-blog-ai package as a dependency
5. Set up your API key in .env.local (if provided)

Options

npx create-next-blog-ai --help

Available options:

• -y, --yes: Skip all prompts and use default values
• -d, --directory <path>: Specify the Next.js project directory (default: current directory)
• -p, --path <path>: Custom path for blog pages (default: app/blog)
• -a, --api-key <key>: Next-Blog-AI API key
• -t, --typescript: Force generate TypeScript code
• -j, --javascript: Force generate JavaScript code

Example with options:

npx create-next-blog-ai --path app/content/blog --api-key your_api_key_here --typescript

Language Support

The tool automatically detects whether your project is using TypeScript or JavaScript and generates code accordingly. You can override this detection with the --typescript or --javascript flags.

Generated Files

The tool will automatically detect your project structure (src-based or flat) and create the following files:

For src-based projects:

src/
├── app/blog/             # Or custom path specified with --path
│   ├── page.tsx          # Blog list page (or .jsx for JavaScript projects)
│   ├── layout.tsx        # Blog layout component (or .jsx for JavaScript projects)
│   └── [id]/             # Dynamic route for blog posts
│       └── page.tsx      # Blog post detail page (or .jsx for JavaScript projects)
├── app/
│   └── sitemap.ts        # Dynamic sitemap for SEO (or .js for JavaScript projects)
└── lib/
    └── blog-api.ts       # API client setup (or .js for JavaScript projects)

For flat structure projects:

app/blog/                 # Or custom path specified with --path
├── page.tsx              # Blog list page (or .jsx for JavaScript projects)
├── layout.tsx            # Blog layout component (or .jsx for JavaScript projects)
└── [id]/                 # Dynamic route for blog posts
    └── page.tsx          # Blog post detail page (or .jsx for JavaScript projects)

app/
└── sitemap.ts            # Dynamic sitemap for SEO (or .js for JavaScript projects)

lib/
└── blog-api.ts           # API client setup (or .js for JavaScript projects)

How It Works

The generated code uses the Next-Blog-AI package's HTML format to render blog content with minimal setup:

1. API Client Setup: Initializes the Next-Blog-AI client with your API key
2. Blog List Page: Fetches and displays your blog posts with proper metadata
3. Blog Post Page: Dynamically renders individual blog posts with SEO optimization
4. Dynamic Sitemap: Generates a sitemap with all blog posts for improved search engine indexing

The HTML format simplifies implementation, as all content (including styling, comments, and related posts) is pre-rendered by the service.

Requirements

• Next.js project (App Router)
• Node.js >= 14.0.0

Getting an API Key

Visit Next-Blog-AI to sign up and get an API key.

Learn More

• Next-Blog-AI Documentation
• Next.js Documentation

License

MIT