npm package: @misikirayu/nextjs-blog-cms
Description: A modern, plug-and-play blog CMS package for Next.js applications with Supabase backend
Author: Misikir Ayu
Latest version: 1.1.4

# 🚀 @misikirayu/nextjs-blog-cms

A modern, plug-and-play blog CMS package for Next.js applications with Supabase integration. This package provides a complete blog system with an admin dashboard that can be easily integrated into any existing Next.js application.

## ✨ Features

- **Modern Blog System**: Beautiful, responsive blog with markdown-style content
- **Admin Dashboard**: Full-featured admin panel for content management
- **Supabase Integration**: Built on Supabase PostgreSQL with real-time capabilities
- **Authentication**: Secure admin authentication with Supabase Auth
- **Image Support**: Built-in image upload and management
- **SEO Optimized**: Meta tags, structured data, and performance optimized
- **TypeScript**: Fully typed for better development experience
- **Tailwind CSS**: Modern styling with utility-first CSS

## 📦 Installation

```bash
npm install @misikirayu/nextjs-blog-cms
```

## 🚀 Quick Start

### 1. Set up Supabase

1. Create a new Supabase project at [supabase.com](https://supabase.com)
2. Get your project URL and anon key from the project settings
3. Run the SQL script from `database.sql` in your Supabase SQL editor

### 2. Configure Environment Variables

Create a `.env.local` file in your Next.js project:

```env
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key
```

### 3. Set up Tailwind CSS

Add these styles to your global CSS:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Blog content styling */
.prose {
  @apply max-w-none;
}

.prose h1 {
  @apply text-4xl font-bold text-gray-900 mb-6;
}

.prose h2 {
  @apply text-3xl font-bold text-gray-900 mb-4 mt-8;
}

.prose h3 {
  @apply text-2xl font-bold text-gray-900 mb-3 mt-6;
}

.prose p {
  @apply text-gray-700 mb-4 leading-relaxed;
}

.prose ul {
  @apply list-disc list-inside mb-4;
}

.prose ol {
  @apply list-decimal list-inside mb-4;
}

.prose li {
  @apply text-gray-700 mb-1;
}

.prose blockquote {
  @apply border-l-4 border-gray-300 pl-4 italic text-gray-600 mb-4;
}

.prose code {
  @apply bg-gray-100 px-2 py-1 rounded text-sm font-mono;
}

.prose pre {
  @apply bg-gray-100 p-4 rounded-lg overflow-x-auto mb-4;
}

.prose pre code {
  @apply bg-transparent p-0;
}
```

### 4. Configure Next.js

Update your `next.config.js`:

```javascript
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '*.supabase.co',
        port: '',
        pathname: '/storage/v1/object/public/**',
      },
    ],
  },
};

module.exports = nextConfig;
```

### 5. Create Blog Routes

Create the following file structure:

```
app/
├── blog/
│   ├── layout.tsx
│   ├── page.tsx
│   └── [slug]/
│       └── page.tsx
└── admin/
    ├── layout.tsx
    ├── login/
    │   └── page.tsx
    ├── page.tsx
    ├── posts/
    │   ├── page.tsx
    │   ├── new/
    │   │   └── page.tsx
    │   └── [id]/
    │       └── edit/
    │           └── page.tsx
    └── settings/
        └── page.tsx
```

### 6. Import and Use Components

```tsx
// app/blog/layout.tsx
import { BlogLayout } from '@misikirayu/nextjs-blog-cms';

export default function Layout({ children }: { children: React.ReactNode }) {
  return <BlogLayout>{children}</BlogLayout>;
}

// app/blog/page.tsx
import { BlogPage } from '@misikirayu/nextjs-blog-cms';

export default function Page() {
  return <BlogPage />;
}

// app/blog/[slug]/page.tsx
import { BlogPostPage } from '@misikirayu/nextjs-blog-cms';

export default function Page({ params }: { params: { slug: string } }) {
  return <BlogPostPage slug={params.slug} />;
}

// app/admin/login/page.tsx
import { AdminLoginPage } from '@misikirayu/nextjs-blog-cms';

export default function Page() {
  return <AdminLoginPage />;
}

// app/admin/page.tsx
import { AdminDashboard } from '@misikirayu/nextjs-blog-cms';

export default function Page() {
  return <AdminDashboard />;
}

// app/admin/posts/page.tsx
import { AdminPostsPage } from '@misikirayu/nextjs-blog-cms';

export default function Page() {
  return <AdminPostsPage />;
}

// app/admin/settings/page.tsx
import { AdminSettingsPage } from '@misikirayu/nextjs-blog-cms';

export default function Page() {
  return <AdminSettingsPage />;
}
```

## 🎯 Available Components

### Blog Components
- `BlogLayout`: Layout wrapper for blog pages
- `BlogPage`: Main blog listing page
- `BlogPostPage`: Individual blog post page

### Admin Components
- `AdminLoginPage`: Admin authentication page
- `AdminDashboard`: Admin dashboard overview
- `AdminPostsPage`: Posts management page
- `AdminSettingsPage`: Settings and configuration page
- `AdminNavigation`: Navigation component for admin pages
- `PostForm`: Form component for creating/editing posts
- `PostActions`: Actions component for post management

### Utility Functions
- `createClient`: Client-side Supabase client
- `createServerClient`: Server-side Supabase client
- `requireAuth`: Authentication middleware
- `requireAdmin`: Admin access middleware

## 🔧 Configuration

### Customization

You can customize the blog by modifying the components or extending them:

```tsx
// Custom blog layout
import { BlogLayout } from '@misikirayu/nextjs-blog-cms';

export default function CustomBlogLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="custom-wrapper">
      <BlogLayout>
        {children}
      </BlogLayout>
    </div>
  );
}
```

## 📚 API Reference

### Database Schema

```typescript
interface BlogPost {
  id: string;
  title: string;
  slug: string;
  content: string;
  excerpt?: string;
  image_url?: string;
  published: boolean;
  created_at: string;
  updated_at: string;
}
```

### Supabase Client

```typescript
// Client-side
import { createClient } from '@misikirayu/nextjs-blog-cms';

const supabase = createClient();

// Server-side
import { createServerClient } from '@misikirayu/nextjs-blog-cms';

const supabase = await createServerClient();
```

## 🚀 Deployment

### Vercel

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Add environment variables in Vercel dashboard
4. Deploy

### Other Platforms

The package works with any platform that supports Next.js. Make sure to:

1. Set up environment variables
2. Configure your database
3. Set up image storage (Supabase Storage recommended)

## 🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

## 📄 License

This project is licensed under the MIT License.

## 🆘 Support

If you encounter any issues or have questions:

1. Check the documentation
2. Open an issue on GitHub
3. Contact the maintainer

---

Made with ❤️ by [Misikir Arayu]