Zenblog with Next.js

How to use Zenblog with Next.js.

Install Zenblog

Start by installing the Zenblog package with your preferred package manager. This example uses npm. The zenblog package is a simple typescript package that wraps the Zenblog HTTP API.

Terminal
1npm install zenblog

Initialize Zenblog

You can find your blog ID in the Zenblog dashboard under settings.

lib/zenblog.ts
1import { createZenblogClient } from "zenblog";
2
3export const zenblog = createZenblogClient({ blogId: process.env.ZENBLOG_BLOG_ID });

Fetch your posts

Fetch your posts from the Zenblog API.

cms/index.tsx
1import { createZenblogClient } from "zenblog";
2
3const zenblog = createZenblogClient({ blogId: process.env.ZENBLOG_BLOG_ID });
4        
5const posts = await zenblog.posts.list();

Render your posts

Render your posts in your app.

cms/index.tsx
1
2<div>
3  {posts.map((post) => (
4    <a href={`/blog/${post.slug}`} key={post.id}>
5      {post.title}
6    </a>
7  ))}
8</div>
9

Fetch a single post with content

blog/index.tsx
1import { createZenblogClient } from "zenblog";
2
3const zenblog = createZenblogClient({ blogId: process.env.ZENBLOG_BLOG_ID });
4
5const post = await zenblog.posts.get({ slug: "my-first-post" });

Render your post

Render your post in your app. NextJS example.

blog/index.tsx
1<div>{post.title}</div>
2<div>{post.content}</div>
3<div>{post.publishedAt}</div>
4<div dangerouslySetInnerHTML={{ __html: post.html_content }} />

You can use something like Tailwind Typography to easily style the HTML content.