### Install Zenblog via npm

Source: https://zenblog.com/docs

Install the Zenblog package using the terminal.

```bash
npm install zenblog
```

--------------------------------

### Initialize Zenblog Client

Source: https://zenblog.com/docs

Initialize the Zenblog client using your blog ID from environment variables in cms/index.tsx.

```typescript
import { createZenblogClient } from "zenblog";

const zenblog = createZenblogClient({ blogId: process.env.ZENBLOG_BLOG_ID });
```

--------------------------------

### Fetch Posts List

Source: https://zenblog.com/docs

Fetch a list of posts from the Zenblog API in cms/index.tsx.

```typescript
import { createZenblogClient } from "zenblog";

const zenblog = createZenblogClient({ blogId: process.env.ZENBLOG_BLOG_ID });
        
const posts = await zenblog.posts.list();
```

--------------------------------

### Render Posts List

Source: https://zenblog.com/docs

Render the list of posts in your application using cms/index.tsx.

```jsx

<div>
  {posts.data.map((post) => (
    <a href={`/blog/${post.slug}`} key={post.id}>
      {post.title}
    </a>
  ))}
</div>
```

--------------------------------

### Fetch Single Post

Source: https://zenblog.com/docs

Fetch a single post by its slug from the Zenblog API in cms/index.tsx.

```typescript
import { createZenblogClient } from "zenblog";

const zenblog = createZenblogClient({ blogId: process.env.ZENBLOG_BLOG_ID });

const post = await zenblog.posts.get({ slug: "my-first-post" });
```

--------------------------------

### Render Single Post

Source: https://zenblog.com/docs

Render a single post's content in a Next.js application using cms/index.tsx.

```jsx
<div>{post.title}</div>
<div>{post.content}</div>
<div>{post.publishedAt}</div>
<div dangerouslySetInnerHTML={{ __html: post.html_content }} />
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.