🚀 @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

npm install @misikirayu/nextjs-blog-cms

🚀 Quick Start

1. Set up Supabase

1. Create a new Supabase project at 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:

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:

@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:

/** @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

// 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:

// 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

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

// 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]