Quick Start

Get your blog up and running in minutes with Blog Kit. This guide shows you the fastest way to integrate Blog Kit into your Next.js application using Static Site Generation (SSG) for optimal performance and SEO.

Next.js SSG (Recommended)

The easiest way to get started is with Next.js using Static Site Generation (SSG):

// app/blog/page.tsx
import { getAllBlogsMeta } from '@haroonwaves/blog-kit-core';
import { BlogList } from '@haroonwaves/blog-kit-react';
import Link from 'next/link';

export default function BlogPage() {
	const blogsMeta = getAllBlogsMeta({
		contentDirectory: process.cwd(),
		blogSubdirectory: 'content/blog',
	});

	return (
		<BlogList
			metadata={blogsMeta}
			basePath="/blog"
			renderLink={(href, children) => <Link href={href}>{children}</Link>}
		/>
	);
}

// app/blog/[slug]/page.tsx
import { getAllBlogsMeta, getBlog } from '@haroonwaves/blog-kit-core';
import { BlogRenderer } from '@haroonwaves/blog-kit-react';
import { notFound } from 'next/navigation';

export function generateStaticParams() {
	const blogsMeta = getAllBlogsMeta({
		contentDirectory: process.cwd(),
		blogSubdirectory: 'content/blog',
	});
	return blogsMeta.map((meta) => ({ slug: meta.slug }));
}

export default async function BlogPostPage({ params }: { params: Promise<{ slug: string }> }) {
	const { slug } = await params;

	const blog = getBlog(slug, {
		contentDirectory: process.cwd(),
		blogSubdirectory: 'content/blog',
	});

	if (!blog) notFound();

	return (
		<article>
			<h1>{blog.metadata.title}</h1>
			<BlogRenderer content={blog.content} metadata={blog.metadata} />
		</article>
	);
}

For more examples, see Next.js SSG Example, Next.js SSR Example, or Pure React Example.