NextJS Blog Toolkit

A comprehensive CLI tool to easily set up and manage blogs in Next.js applications with advanced features.

Features

• 🚀 Quick Setup: Initialize a complete blog system with a single command
• 📝 Admin Panel: Powerful admin interface for managing blog content
• 📅 Post Management: Create, edit, delete, and schedule posts
• 🏷️ Categorization: Support for tags and categories
• 📧 Newsletter Integration: Optional subscriber management
• 🖼️ Image Uploads: Support for UploadThing and Cloudflare R2
• 🔒 Flexible Auth: Support for NextAuth, Clerk, Auth0, and custom auth
• 💾 Storage Options: Use file system or PostgreSQL with Prisma
• 🔄 TypeScript & JavaScript: Works with both TS and JS projects

Installation

npm install nextjs-blog-toolkit

Usage

Initialize a Blog

To set up a blog in your Next.js application, run:

npx nextjs-blog-toolkit init

This interactive CLI will prompt you for:

• Blog Route: Where your blog will be accessible (default: /blog)
• Admin Route: Where the admin panel will be accessible (default: /blog/admin)
• Storage Type: Choose between file system (markdown) or database storage
• Database Type: If using database storage, choose PostgreSQL, MySQL, or SQLite
• Auth Provider: Choose between NextAuth.js, Clerk, Auth0, or custom authentication
• Image Upload: Choose between UploadThing, Cloudflare R2, or no image upload
• Newsletter: Whether to include newsletter functionality
• Tags & Categories: Whether to include tags and categories for blog posts

Configuration

After initialization, a next.blog.config.js file will be created in your project root. You can customize the blog settings in this file:

module.exports = {
  // The route where the blog will be accessible
  blogRoute: '/blog',
  
  // The route where the admin panel will be accessible
  adminRoute: '/blog/admin',
  
  // Whether to include newsletter functionality
  includeNewsletter: true,
  
  // Blog metadata
  metadata: {
    title: 'My Blog',
    description: 'A blog built with Next.js',
    author: 'Your Name',
  },
  
  // Blog post storage configuration
  storage: {
    // Options: 'file', 'database'
    type: 'file',
    
    // If using 'file' storage, the directory where blog posts will be stored
    directory: './content/blog',
    
    // If using 'database', the database configuration
    database: {
      // Options: 'postgresql', 'mysql', 'sqlite'
      type: 'postgresql',
      
      // Whether to use Prisma ORM
      usePrisma: true,
    },
  },
  
  // Authentication configuration for the admin panel
  auth: {
    // Options: 'next-auth', 'clerk', 'auth0', 'custom'
    type: 'next-auth',
    
    // If using 'next-auth', the providers to use
    providers: ['github', 'credentials'],
  },
  
  // Image upload configuration
  imageUpload: {
    // Options: 'uploadthing', 'cloudflare', 'none'
    provider: 'uploadthing',
  },
  
  // Blog categorization
  categorization: {
    // Whether to include tags
    includeTags: true,
    
    // Whether to include categories
    includeCategories: true,
  },
};

Authentication

The admin panel requires authentication. By default, it uses NextAuth.js for authentication, but you can also use Clerk, Auth0, or a custom authentication solution.

NextAuth.js

To configure NextAuth.js, set the following environment variables:

# Required
NEXTAUTH_SECRET=your_nextauth_secret
NEXTAUTH_URL=http://localhost:3000

# For GitHub authentication
GITHUB_ID=your_github_client_id
GITHUB_SECRET=your_github_client_secret

# For credentials authentication (default admin user is created during setup)
# Default credentials:
# Email: [email protected]
# Password: (generated during setup)

Clerk

To configure Clerk, set the following environment variables:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key

Auth0

To configure Auth0, set the following environment variables:

AUTH0_SECRET=your_auth0_secret
AUTH0_BASE_URL=http://localhost:3000
AUTH0_ISSUER_BASE_URL=https://your-tenant.auth0.com
AUTH0_CLIENT_ID=your_auth0_client_id
AUTH0_CLIENT_SECRET=your_auth0_client_secret

Image Uploads

The blog supports image uploads using either UploadThing or Cloudflare R2.

UploadThing

To configure UploadThing, set the following environment variables:

UPLOADTHING_SECRET=your_uploadthing_secret
UPLOADTHING_APP_ID=your_uploadthing_app_id

Cloudflare R2

To configure Cloudflare R2, set the following environment variables:

CLOUDFLARE_R2_ACCESS_KEY_ID=your_access_key_id
CLOUDFLARE_R2_SECRET_ACCESS_KEY=your_secret_access_key
CLOUDFLARE_R2_ENDPOINT=https://your-account-id.r2.cloudflarestorage.com
CLOUDFLARE_R2_BUCKET_NAME=your_bucket_name
CLOUDFLARE_R2_PUBLIC_URL=https://your-public-bucket-url.com

Database Setup

If you choose to use a database for storage, the CLI will set up the necessary database schema using Prisma.

PostgreSQL

To configure PostgreSQL, set the following environment variable:

DATABASE_URL="postgresql://postgres:password@localhost:5432/next-blog"

MySQL

To configure MySQL, set the following environment variable:

DATABASE_URL="mysql://root:password@localhost:3306/next-blog"

SQLite

To configure SQLite, set the following environment variable:

DATABASE_URL="file:./dev.db"

Generated Files

The CLI generates the following files and directories in your Next.js application:

• /app/[blogRoute]: Blog routes
• /app/[adminRoute]: Admin panel routes
• /app/api/blog: API routes for blog functionality
• /app/api/newsletter: API routes for newsletter functionality (if enabled)
• /components/blog: React components for the blog
• /lib/blog.ts: Blog functionality
• /lib/auth.ts: Authentication configuration
• /lib/newsletter.ts: Newsletter functionality (if enabled)
• /prisma/schema.prisma: Prisma schema (if using database storage)

Requirements

• Next.js 13+ (App Router)
• Node.js 14+
• TypeScript (recommended) or JavaScript

License

MIT