Build Your Professional Blog with Next.js & Blog Kit

Blog Kit is a modern, Next.js-first toolkit designed to help you build your own professional blog with markdown in minutes. Whether you're creating a personal blog, documentation site, or content platform, Blog Kit provides all the essential tools you need to build a high-performance blog with minimal configuration.

Perfect for developers, writers, and content creators who want full control over their blog using the power of Next.js and React server components.

Key Features

Core Package

• ✅ Parse markdown files with frontmatter (using gray-matter)
• ✅ Extract blog metadata (title, description, date, category)
• ✅ Calculate reading time automatically (using reading-time)
• ✅ Sort blogs by date (newest first)
• ✅ TypeScript support with full type definitions
• ✅ Zero dependencies on React or UI frameworks

React Package

• ✅ Beautiful, customizable markdown rendering (using react-markdown)
• ✅ Syntax highlighting for code blocks (using rehype-prism-plus)
• ✅ GitHub Flavored Markdown (GFM) support (using remark-gfm)
• ✅ Raw HTML rendering support (using rehype-raw)
• ✅ Automatic heading IDs for anchor links (using rehype-slug-custom-id)
• ✅ Beautiful, stateless BlogList for high-performance rendering
• ✅ Customizable Filter component with built-in search, categories, and results count
• ✅ useBlogs hook and shared utilities for easy search/filter integration
• ✅ Loading placeholders and responsive blog cards
• ✅ Customizable styling with Tailwind CSS classes
• ✅ TypeScript support with full type definitions
• ✅ Work seamlessly with Next.js App Router and Server Components

Use Cases

Blog Kit is perfect for:

• Personal Blogs - Share your thoughts, tutorials, and experiences
• Documentation Sites - Create beautiful docs with markdown
• Portfolio Projects - Showcase your writing and technical skills
• Content Platforms - Build content-driven applications
• Technical Blogs - Write about code with syntax highlighting
• Company Blogs - Professional blog systems with minimal setup

Packages

• @haroonwaves/blog-kit-core - Core utilities for parsing markdown blog files with frontmatter
• @haroonwaves/blog-kit-react - React components and hooks for rendering blogs

Live Demo

haroonwaves.github.io/blog - A full blog built using Blog Kit.

Getting Started

Ready to build your blog? Get started in minutes:

1. Getting Started — Install, configure, and build your first blog
2. Guides — Add search, dark mode, and customize components
3. API Reference — Complete reference for all functions and components

Or jump straight to the Getting Started Guide to see Blog Kit in action.